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">
<input type="button" value="只会显示" id="btn2">
<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)
})
内容来源于网络如有侵权请私信删除
文章来源: 博客园
- 还没有人评论,欢迎说说您的想法!