JQuery动画队列

动画队列

当在jQuery对象上调用动画方法时，如果对象正在执行某个动画效果，那么新调用的动画方法就会被添加到动画队列中，jQuery会按顺序依次执行动画队列的每个动画。

动画队列机制的执行顺序

1.对于一组元素上的动画效果，有如下两种情况：
a) 当在一个animate()方法中应用多个属性时，动画是同时发生的；
b)当以链式的写法应用动画方法时，动画是按照顺序发生的。

2.对于多组元素上的动画效果，有如下情况：
a) 默认情况下，动画都是同时发生的；
b) 当以回调的形式应用动画方式时，动画是按照回调顺序发生的。

举个例子

$("#btn).on("click",function(){
$box.hide(1000, function(){
   $box.show(1000, function(){
     $box.fadeOut('slow',function(){
       $box.fadeIn('slow',function(){
         $box.slideUp(function(){
           $box.slideDown(function(){
             console.log('动画执行完毕')
           })
         })
       })
     })
   })
})
});

正常执行情况下点击#btn，会自动执行完所有动画。
而点击多次#btn则会导致当前的动画循环执行，除非关闭浏览器，否则根本停不下来。
解决以上的问题关键在于jQuery动画队列。点击#btn后会自动将绑定的所有动画加载到一个动画队列中，再依次执行，多次点击#btn的效果就是往动画队列中添加新的动画，这样很多动画都存在动画队列中，直到动画队列中都执行完为止。