jQuery效果（显示与隐藏，滑动效果，动画队列和停止排队，淡入和淡出，自定义动画）

1.显示与隐藏

显示  show([speed,[easing],[fn]])      （中括号表示可以省略）

• speed : （速度） "slow" , "normal" , "fast" , 或者毫秒数（1000 | 2000......)
• easing : （切换效果） "swing"（先慢后快再慢） , "linear" （匀速）
• fn : （回调函数），动画完成时执行，每个元素执行一次

隐藏  hide([speed,[easing],[fn]])

参数含义与显示相同

准备一个盒子，两个按钮，并设置样式：

<div></div>
  <button>隐藏</button>
  <button>显示</button>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>

 

 绑定点击事件，当点击隐藏按钮时让div在1s时间隐藏，并弹出aa

当点击显示按钮时让div在1s时间显示，并弹出bb

<script>
    $(function () {
      $('button:first').click(function () {
        $('div').hide(1000, 'swing', function () {
          alert('aa');
        })
      })
      $('button').eq(1).click(function () {
        $('div').show(1000, 'swing', function () {
          alert('bb');
        })
      })
    })
</script>

2.切换

toggle([speed,[easing],[fn]])

参数含义同上

给上面例子添加一个按钮

 <button>切换</button>

 

 给该按钮绑定点击事件：

$('button').eq(2).click(function () {
    $('div').toggle('fast', 'linear')
})

3.滑动效果及事件切换

下滑   sildeDown([speed,[easing],[fn]])

首先先准备两个盒子，并将蓝色盒子隐藏

  <div></div>
  <div class="small"></div>
  <style>
    div {
      width: 50px;
      height: 40px;
      background-color: pink;
    }

    .small {
      display: none;
      width: 50px;
      height: 100px;
      background-color: blue;
    }
  </style>

 

 当鼠标经过粉色盒子时，让蓝色盒子下滑：

<script>
    $(function () {
      $('div').mouseenter(function () {
        $('.small').slideDown();
      })
    })
</script>

 

上滑   slideUp([speed,[easing],[fn]])

当鼠标离开粉色盒子时让蓝色盒子上滑：

$('div:first').mouseleave(function () {
    $('.small').slideUp();
})

 

滑动切换  slideToggle([speed,[easing],[fn]])

 将上面代码进行更改   当鼠标进入粉色盒子时切换效果

<script>
    $(function () {
      $('div:first').mouseenter(function () {
        $('.small').slideToggle();
      })
    })
  </script>

 

 此时，当鼠标离开粉色盒子时并没有效果，只有鼠标进入粉色盒子才会发生切换，此处效果不明显，可以自己试试

 事件切换  hover([over],out)

over : 鼠标经过时触发的事件

out : 鼠标移出时触发的事件

如果只写一个函数，那么鼠标经过和离开都会触发

可以用这个方法实现鼠标经过和离开触发滑动切换效果，和之前分别使用上滑和下滑结合mouseenter和mouseleave一起做出的效果是一致的。

$(function () {
      $('div:first').hover(function () {
        $('.small').slideToggle();
      })
})

 

4.动画队列和停止排队方法

动画效果一旦触发就会执行，多次触发就会排队

在上面的最后一个例子中可以看到，当快速的滑动鼠标，蓝色盒子的滑动效果也会随之变快

我们给切换效果加上时间：

$('.small').slideToggle(1000);

 

 可以看到，当我疯狂的移动鼠标出入，此时的滑动效果还是按照正常步骤执行，且当我鼠标不动了，他仍然在执行，这是因为之前排队的效果还没有完成。

 停止排队：stop()

写到动画或者效果的前面，相当于停止上一次动画

$('.small').stop().slideToggle(1000);

 

 可以看到此时当我不停的经过离开粉色盒子，蓝色盒子的滑动效果不会继续执行原有的，而是执行最新发生事件的效果，原来的动画没有执行完不会排队。

5.淡入和淡出

淡入   fadeIn([speed,[easing],[fn]])

准备一个盒子和按钮： （盒子隐藏）

  <div></div>
  <button>淡入</button>
  <style>
    div {
      display: none;
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>

 给按钮绑定点击事件：

<script>
    $(function () {
      $('button:first').click(function () {
        $('div').fadeIn();
      })
    })
</script>

 

淡出   fadeOut([speed,[easing],[fn]])

添加按钮：

 <button>淡出</button>

给按钮绑定点击事件：

 $('button').eq(1).click(function () {
      $('div').fadeOut(1000);
 })

 

切换   fadeToggle([speed,[easing],[fn]])

添加按钮：

 <button>切换</button>

 给按钮绑定点击事件：

$('button').eq(2).click(function () {
     $('div').fadeToggle(1000);
})

 

渐进方式调整到指定不透明度   fadeTo([speed,opacity,[easing],[fn]])

opacity : 透明度 0 ~ 1 之间 （必须写）

此时的speed速度必须写

添加按钮：

<button>半透明</button>

 绑定事件：

$('button').eq(3).click(function () {
   $('div').fadeTo(1000, .5);
})

 

6.自定义动画

animate(params,[speed],[easing],[fn])

params : 想要更改的样式属性，以对象的形式传递，必须写。（属性名可以不用带引号，如果是                复合属性则需采用驼峰命名法）

准备一个盒子和一个按钮：

  <div></div>
  <button>动画</button>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>

给按钮绑定点击事件： （点击后盒子的宽度和高度都由200px变成100px）

<script>
    $(function () {
      $('button').click(function () {
        $('div').animate({
          width: '100px',
          height: '100px'
        }, 500)
      })
    })
</script>