jQuery动画

隐藏和显示

.hide()隐藏
.show()显示
.toggle()隐藏和显示切换
可以加入时间参数和回调函数（在动画完成时执行）

 $('.text').hide()；

 $('.text').show(300, function() {
    alert('hello.');
});

$('.text').toggle(1000);

渐变.fadeIn() .fadeOut() .fadeToggle()

使用方法同上面相同，效果为淡入淡出

滑动.slideDown() .slideUp() .slideToggle()

使用方法同上面相同，效果为元素的高度逐渐拉开，这会导致页面的下面部分滑下去

  <div class="ct">
    <ul>
      <li class="item">
        <h3>标题1</h3>
        <p>内容1</p>
      </li>
      <li class="item">
        <h3>标题2</h3>
        <p>内容2</p>
      </li>
      <li class="item">
        <h3>标3</h3>
        <p>内容3</p>
      </li>
      <li class="item">
        <h3>标题4</h3>
        <p>内容4</p>
      </li>
    </ul>
  </div>

<script>
$('.ct .item').on('mouseenter', function(){
   $(this).find('p').slideDown(300);
});
$('.ct .item').on('mouseleave', function(){
   $(this).find('p').slideUp(300);
});

自定义.animate()

参数包括，CSS属性和值的对象（必须），时间（可选），回调函数（可选），其中回调函数是同步加载的，例子

        $(".btn").on('click', function(e){
            $(".box").animate({
              width: '200px',
              height: '100px',
              opacity: 0.5,
              left: '100px'
            }, 1000, function(){
              console.log('456')
            });
            console.log('123')
        });
// 动画开始同时打印123，动画结束打印456

一次加载多个动画，并且防止重复点击。

      var pos = [
        {left: '100px', top: 0},
        {left: '100px', top: '50px'},
        {left: '200px', top: '50px'},
        {left: 0, top: '50px'},
        {left: 0, top: 0},
      ]

      var isMove = false;
      var $box = $('.box')

      $('.btn').on('click',function(){
        if(!isMove){
          isMove = true;
          $box.animate(pos[0])
          $box.animate(pos[1])
          $box.animate(pos[2])
          $box.animate(pos[3])
          $box.animate(pos[4], function(){
            isMove = false
          })
        }
      })

停止.stop( [clearQueue ]， [ jumpToEnd ] )和清空动画队列.finish()

• .stop()的clearQueue参数为false（默认）的时候为跳过当前动画，从下一个动画开始执行；参数为true的时候则停止整个动画序列，之后的动画不再执行
• .stop()的jumpToEnd参数为false（默认）的时候CSS停在动画执行停止的过程中，参数为true的时候则CSS会跳转到目标状态（及即当前动画完成时的状态）
• .finish()清空动画队列，CSS直接跳转到最后一个动画的目标状态。

      var pos = [
        {left: '100px', top: 0},
        {left: '100px', top: '50px'},
        {left: 0, top: '50px'},
        {left: 0, top: 0},
      ]

      var $box = $('.box')

      $('.btn').on('click',function(){
          $box.finish();
// 确保每次动画都是从头开始的
          $.each(pos, function(){
            $box.animate(this, 1000)
          })
      })