动画队列
什么是 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(); })