JQuery动画队列解析

第一部分: 定义和操作函数介绍

什么是动画队列

在JQuery中, 一个系列连串的动画是由多个动画连续执行的.
每个动画都调用一次.animate(),他们依照先后顺序执行,
这些连续的动画被默认放在.queue()中.

动画队列api: queue()

对queue有如下操作:

.clearQueue() :清除动画队列未执行的动画
.finish() : 停止当前动画,并清除动画队列未执行的动画, 直接调转到动画最后一帧.
.stop([clearQueue] [,jumpToEnd]): 停止当前正在运行的动画,

clearQueue(default: false)

jumpToEnd(default: false)

书写动画队列的两种方式:

一: 动画函数嵌套方式

var $box = $('.classname')
   $box.hide(1000,function(){
      $box.show(1000,function(){
        $box.fadeOut(1000,function(){
          $box.fadeIn(1000,function(){
            $box.slideUp(1000,function(){
              $box.slideDown(1000,function(){
                console.log("动画队列完毕")
              })
            })
          })
        })
      })
})

二: 自定义动画队列:

$('.className').animate({left: 50},1000)
               .animate({width: 150},1000)
               .animate({width: 180},1000)
               .animate({width: 200},1000)
               .animate({height: 110},1000)
               .animate({height: 100,},1000)
               .animate({width: 100,left: 0},1000)
})

第二部分: 实例演示

案例说明:
点击paly按钮-->开始动画; 点击reset,重置复原. 文本框显示动画队列执行的剩余次数

html

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <input type="button" value="play" id="play">
  <input type="button" value="reset" id="reset">
  <span class="animate-time"></span>
  <div class="wrap" style="position: relative">
    <div class="box" style="width:100px; height:100px; background:red; position:ab2solute"></div>
  </div>
</body>
</html>

JavaScript


$('#play').click(function(){ 
  // 输出动画队列次序
   setInterval(function(){
   $('.animate-time').html( "队列次序:" + $('.wrap .box').queue().length )
   },100)
   
  //动画队列
   $('.wrap .box').animate({left: 50},1000)
                  .animate({width: 150},1000)
                  .animate({width: 180},1000)
                  .animate({width: 200},1000)
                  .animate({height: 110},1000)
                  .animate({height: 100,},1000)
                  .animate({width: 100,left: 0},1000)
})
 // 动画队列重置
  $('#reset').click(function(){
   $('.wrap .box').finish()
})

最终效果:

animateQueue.gif