jQuery动画队列

假设有一组动画设置如下：

$("#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的效果就是往动画队列中添加新的动画，这样很多动画都存在动画队列中，直到动画队列中都执行完为止。
jQuery提供了一个简单的方法解决动画队列问题：

stop([clearQueue],[jumpToEnd]);

• clearQueue:如果设置成true，则清空队列。可以立即结束动画。
• gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。
  同时，动画队列是异步的：

$('#ball').slideUp().fadeIn().css({'width':'200px'});

它的执行顺序是元素宽度马上变成200px的同时，slideUp也在执行，slideUp执行完后再执行fadeIn