jQuery动画队列

.animate( properties [, duration ] [, easing ] [, complete ] )

properties是一个CSS属性和值的对象,动画将根据这组对象移动。

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

示例:


  


  这是box里的内容

为了效果更明显，动画的时间设置为5s，可以看出控制台输出的文字在点击按钮是立即触发，这说明了一个事情，即动画方法animate不是同步的，而是异步的，这就引申出了动画队列。
动画的执行不是同步的，而是加入到动画队列中，这样就可以实现多个动画效果连在一起，构成一个连续的动画。

queue()

queue()方法用来显示在匹配的元素上的已经执行的函数队列

queue([queueName])

queue()方法可以接受一个可选参数——一个含有队列名的字符串。该参数默认是'fx'

queue(callback(next))

queue()方法可以接受一个回调函数作为参数，表示将要添加到队列中的新函数

[注意]queue()方法的回调函数中，可以进行样式变换等，但不可以增加动画效果

由下面代码执行结果可以看出，队列执行完函数后，队列后面的动画效果被停止，这时就需要用到下面要介绍的dequeue()方法。

dequeue()

dequeue()方法用来执行匹配元素队列的下一个函数

dequeue([queueName])

dequeue()方法可以接受一个可选参数——一个含有队列名的字符串，默认是fx
[注意]dequeue()方法本身也算队列的一员

clearQueue()

与deQueue()方法相反，clearQueue()方法用来从列队中移除所有未执行的项
[注意]clearQueue()并不影响当前动画效果

clearQueue([queueName])

clearQueue()方法可以接受一个可选参数——一个含有队列名的字符串，默认是fx

finish()

停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态。

stop()

停止当前正在运行的动画

.stop( [clearQueue ] [, jumpToEnd ] )
参数为空：停止当前动画，执行动画队列中的下一个动画
[clearQueue ]：boolean类型，停止当前正在进行的动画，清空未执行的动画队列，影响动画效果
[, jumpToEnd ]：boolean类型，停止当前正在进行的动画，清空未执行的动画队列，并直接跳到本次动画的结束

参考资料：http://js.jirengu.com/sonutudopu/edit?html,output