先上代码~
// 回调地狱写法
$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)：是否展示当前一帧动画是否执行到最后
-
.stop() 即 .stop(false, false)
假设动画队列有4个动画序列，当执行到动画序列2的时候，使用.stop()，序列2立即停止，并执行动画序列3，执行完后执行动画序列4。
（个人理解：停止当前动画，如果还有后续动画则 从当前动画执行到的地方直接执行动画队列下一个动画序列）
.stop(false, false).png -
.stop(true, false)
假设动画队列中有4个动画序列，当执行到动画序列2的时候，使用.stop(true, false)，序列2立即停止，由于参数 clearQueue 为 true 因此后面没有执行的动画序列全部清空，不会再往下执行动画序列，最终动画会停在动画序列2.stop(true, false)的地方。
（个人理解：执行到哪里.sop(true, false)就停在哪里）
.stop(true, false).png -
.stop(true, true)
假设动画队列中有4个序列，当执行到动画序列2的时候，使用.stop(true, true)，由于参数 clearQueue 为 true 因此后面没有执行的动画序列全部清空，不会再往下执行动画序列；再由于参数 jumpToEnd 为 true 因此最后会停留在动画序列2本身应该结束的地方。
（个人理解：执行到哪个动画中.stop(true, true)就停在哪个动画的结束位置）
.stop(true, true).png
.finish()
停止当前动画，并清除 动画队列 中所有未完成的动画，最终展示 动画队列 最后一帧的最终状态
（个人理解：动画执行中.finish()即提前结束动画展示动画的最终状态）
.queue()
用来显示在匹配的元素上的已经执行的函数队列
可以通过 $(selector).queue().length 获取当前动画队列的长度
通过测试可以发现，一个动画只有完全执行完毕之后才会退出动画队列，在执行当中的动画仍在动画队列中。
