jQuery 动画队列

先上代码~

// 回调地狱写法
$box.hide(1000, function(){
   $box.show(1000, function(){
     $box.fadeOut('slow',function(){
       $box.fadeIn('slow',function(){
         $box.slideUp(function(){
           $box.slideDown(function(){
             console.log('动画执行完毕')
           })
         })
       })
     })
   })
})
// 等价于
// 动画队列写法
$box.hide(1000)
    .show(1000)
    .fadeOut()
    .fadeIn()
    .slideUp()
    .slideDown(function(){
      console.log('真的完毕了')
    })

动画队列可以说是动画执行的一个顺序机制，当我们对一个对象添加多次动画效果之后，添加的动画就会被加入到这个动画队列中，先进先出按顺序执行

动画队列机制和执行顺序

对于一个元素上的动画效果：

• 当在一个animate()方法中应用多个属性时，动画是同时发生的；
• 当以链式的写法应用动画方法时，动画是按照顺序发生的

对于多个元素上的动画效果：

• 默认情况下，动画都是同时发生的
• 当以回调函数的形式应用动画方法时，动画是按照回调顺序发生的

操作动画队列方法

.clearQueue()

清除 动画队列 中未执行的动画

.stop([clearQueue][.jumpToEnd])

停止当前正在运行的动画
参数：
（1）clearQueue (default: false)：是否清除 动画队列 中未执行的动画
（2）jumpToEnd (default: false)：是否展示当前一帧动画是否执行到最后

1. .stop() 即 .stop(false, false)
   假设动画队列有4个动画序列，当执行到动画序列2的时候，使用.stop()，序列2立即停止，并执行动画序列3，执行完后执行动画序列4。
   （个人理解：停止当前动画，如果还有后续动画则 从当前动画执行到的地方直接执行动画队列下一个动画序列）
   

   .stop(false, false).png

2. .stop(true, false)
   假设动画队列中有4个动画序列，当执行到动画序列2的时候，使用.stop(true, false)，序列2立即停止，由于参数 clearQueue 为 true 因此后面没有执行的动画序列全部清空，不会再往下执行动画序列，最终动画会停在动画序列2.stop(true, false)的地方。
   （个人理解：执行到哪里.sop(true, false)就停在哪里）
   

   .stop(true, false).png

3. .stop(true, true)
   假设动画队列中有4个序列，当执行到动画序列2的时候，使用.stop(true, true)，由于参数 clearQueue 为 true 因此后面没有执行的动画序列全部清空，不会再往下执行动画序列；再由于参数 jumpToEnd 为 true 因此最后会停留在动画序列2本身应该结束的地方。
   （个人理解：执行到哪个动画中.stop(true, true)就停在哪个动画的结束位置）
   

   .stop(true, true).png

.finish()

停止当前动画，并清除 动画队列 中所有未完成的动画，最终展示 动画队列 最后一帧的最终状态
（个人理解：动画执行中.finish()即提前结束动画展示动画的最终状态）

.finish().png

.queue()

用来显示在匹配的元素上的已经执行的函数队列

可以通过 $(selector).queue().length 获取当前动画队列的长度

通过测试可以发现，一个动画只有完全执行完毕之后才会退出动画队列，在执行当中的动画仍在动画队列中。

参考：
jQuery 动画效果 与 动画队列
深入学习jQuery动画队列