动画队列

什么是 jQuery 的动画队列？首先，我们先来了解一下什么是队列。队列是一种特殊的线性表，只允许在表的前端（表头）进行删除操作，在表的后端（表末）进行添加操作，队列的特点是先进先出，最先插入的元素最先被删除。所以,动画队列可以说是动画执行的一个顺序机制，当我们对一个对象添加多次动画效果时后，添加的动作就会被放入这个动画队列中，等前面的动画完成后再开始执行。

动画队列机制的执行顺序

1.对于一组元素上的动画效果，有如下两种情况：

a) 当在一个animate()方法中应用多个属性时，动画是同时发生的；

b)当以链式的写法应用动画方法时，动画是按照顺序发生的。

2.对于多组元素上的动画效果，有如下情况：

a) 默认情况下，动画都是同时发生的；

b) 当以回调的形式应用动画方式时，动画是按照回调顺序发生的。

以上是整个动画的调度一个流程，其实都是利用队列异步的空闲然后执行同步的代码，这样在处理上是没有浪费资源的，而且精确度也是最高的。另外，在动画方法中，要注意其他非动画的方法会插队，例如 css() 方法，要使这些非动画的方法也按照顺序来执行，需要把这些方法写在动画方法的回调函数中。例如：

$("#id").animate({left:"400px", top:"300px"}, 3000, function(){ $(this).css("border", "1px solid blue"); });

与之相关的方法

动画队列中主要用到 jQuery 的 queue、dequeue 和 clearqueue。

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

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

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

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

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

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