假设有一组动画设置如下：
$("#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
