jQuery的几种显示隐藏方法

jQuery显示隐藏方法

hide（）方法

元素隐藏，隐藏的前提必须是元素display:block；
show（）方法

元素显示，显示的前提必须是元素display:none;
toggle（）方法

在元素隐藏和显示之间进行切换

这三种方法设置的效果，在过程中还可以出现过渡动画

• 如果不传参数，直接显示和隐藏就没有过渡动画

• 如果传参数：

•单词格式：”slow“ , “normal” , “fast”

• 数字格式：单位是毫秒，在规定时间内会出现显示或隐藏的动画。

<body><div class="box"><img src="../../imgs/1.jpg" alt=""><br></div><input type="button" value="只会隐藏" id="btn1">&nbsp;&nbsp;<input type="button" value="只会显示" id="btn2">&nbsp;&nbsp;<input type="button" value="可以隐藏、显示切换" id="btn3"><script src="../jq/jquery-1.12.4.min.js"></script><script>var $img = $("img");var $btn1 = $("#btn1")var $btn2 = $("#btn2");var $btn3 = $("#btn3");//添加点击事件，实现图片隐藏或显示$btn1.click(function(){// $img.hide("slow");$img.hide(1000);})$btn2.click(function(){$img.show("normal");})$btn3.click(function(){$img.toggle("fast");})
</script>

过渡时间内，伴随着宽度和高度以及透明度的变化

滑动显示隐藏

slideDown（）：滑动显示（方向不一定）
slideUp（）：滑动隐藏
slideToggle（）：滑动切换

让元素在display属性的block 和 none 之间进行切换

如果不传参数，默认的过渡时间是400毫秒。
如果传参数：
• 单词格式：“slow”,“normal”, “fast”
• 数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画

$btn1.click(function () {$img.slideUp(2000);})$btn2.click(function () {$img.slideDown("normal");})$btn3.click(function () {$img.slideToggle();
})

注意的是：
- 如果滑动的元素没有设置宽高，就没有滑动效果；(有高度没宽度，效果如同show、hide，透明度不会发送变化；有宽度没高度，高度方向的滑动效果)
- 如果元素设置了高度和宽度，会进行上下垂直方向的滑动；
- 动画的效果：高度属性在0到设置值之间的变化，没有透明度动画；
- 如果元素设置了定位，偏移量方向如果是bottom参与了，滑动方向会发生变化

img {position: absolute;/*fixed 固定定位同*/bottom: 10px;display: block;width: 400px;height: 220px;}

淡入淡出

fadeln（）方法：淡入，透明度逐渐增大最终显示
fadeOut（）方法：淡出，透明度逐渐降低最终隐藏
fadeToggle（）方法：切换效果
fadeTo（）方法：淡入或淡出到指定的某个透明度
动画效果，执行的是透明度动画，也是在display属性的block和none之间切换

• 如果不传参数：默认的过渡时间为 400 毫秒。
• 如果传递参数：
• 单词格式：“slow”,“normal”, “fast”
• 数字格式的时间，单位是毫秒，在规定时间之内会出现显示或隐藏的动画。

var $img = $("img");
var $btn1 = $("#btn1")
var $btn2 = $("#btn2");
var $btn3 = $("#btn3");
var $btn4 = $("#btn4")//添加点击事件，实现图片隐藏或显示
$btn1.click(function () {$img.fadeOut()
})$btn2.click(function () {$img.fadeIn()
})$btn3.click(function () {$img.fadeToggle()
})$btn4.click(function(){//需要传两个参数，时间和透明度$img.fadeTo(1000,0.5)
})

jQuery的几种显示隐藏方法相关推荐

微信小程序元素显示隐藏方法总结（原生）
目录前言一.css实现总结前言我们在日常开发中,或多或少的会遇见一些元素的显示隐藏的需要.这里,我们以vue来举例,在vue中,我们往往通过v-show或者v-if来控制元素的显示和隐藏.但 ...
html密码框输入内容隐藏,jQuery输入框密码的显示隐藏【代码分享】
效果图: 代码如下: jQuery输入框密码显示隐藏代码 @font-face {font-family: "iconfont"; src: url('iconfont.eot') ...
javascript和jquery实现页面元素显示/隐藏切换的方法
一.javascript实现方法一: document.getElementById("idname").style.visibility="hidden"; ...
jQuery 入门教程(5): 显示/隐藏内容
2019独角兽企业重金招聘Python工程师标准>>> jQuery的hide()和show()可以用来显示和隐藏内容.比如下面的例子:jQuery的hide()和show() 可以 ...
jquery根据滚动像素显示隐藏顶部导航条
本文使用jquery的scrollTop方法监视页面垂直滚动像素,并根据像素隐藏或者显示顶部的导航条. 效果预览网址:http://www.keleyi.com/keleyi/phtml/scroll ...
jQuery 使用slideToggle()滑动显示隐藏
slideToggle() 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数. 这个动画效果只调整元素的高度,可以使匹配的元素以"滑动"的方式隐藏或显示 ...
动态控制jQuery easyui datagrid工具栏显示隐藏
//隐藏第一个按钮 $('div.datagrid-toolbar a').eq(0).hide(); //隐藏第一条分隔线 $('div.datagrid-toolbar div').eq(0).h ...
jquery关于多个显示隐藏
今天做了一个关于多个栏目的隐藏与显示,内容为初始化显示6个栏目,点击按钮显示所有的栏目,在次点击隐藏出现的栏目 <div class="ftlt_z_navigation acer&q ...
jQuery实现下拉菜单(点击显示/隐藏)
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>j ...

jQuery的几种显示隐藏方法

jQuery显示隐藏方法

这三种方法设置的效果，在过程中还可以出现过渡动画

滑动显示隐藏

让元素在display属性的block 和 none 之间进行切换

淡入淡出

jQuery的几种显示隐藏方法相关推荐

最新文章

热门文章