动画队列

动画队列可以说是动画执行的一个顺序机制，当我们对一个对象添加多次动画效果时后，添加的动作就会被放入这个动画队列中，等前面的动画完成后再开始执行即先进先出

例如以下代码：

$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('真的完毕了')
    })

相关的方法

queue()

queue() 方法主要是将一个动画函数数组绑定到一个队列上。例如：

('#box').animate({'left': '100px'}, 1000).animate({'width': '200px'}, 1000);
('#box').queue(function() { $('#box').css('background', 'lightgreen'); })

dequeue()

dequeue() 方法主要是执行队列的第一个函数，并从队列中删除。例如：

('#box').animate({'left': '100px'}, 1000).animate({'width': '200px'}, 1000);
('#box').queue(function() { (this).css('background', 'lightgreen');(this).dequeue(); })

clearqueue()

clearqueue() 方法是清除动画队列。例如：

('#btn1').click(function(event) {('#box').clearQueue(); })