欢迎光临
我的个人博客网站

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) }) 
赞(0) 打赏
未经允许不得转载:张拓的天空 » jQuery的几种显示隐藏方法
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏