jQuery的几种显示隐藏方法

jQuery显示隐藏方法

• hide（）方法

  元素隐藏，隐藏的前提必须是元素display:block；

• show（）方法

  元素显示，显示的前提必须是元素display:none;

• toggle（）方法

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

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

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

? ? 如果传参数：

? ?单词格式：”slow“ , "normal" , "fast"

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

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

滑动显示隐藏

• 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)
})