jQuery队列控制方法queue()/queue()/clearQueue()的详细说明

先解释一下这组方法各自的含义。queue(name，[callback]):当只传入一个参数时，返回并指向第一个匹配元素的队列(将是函数数组，队列名默认为FX)；传入两个参数时，第一个参数默认还是fx的队列名，第二个参数分为两种情况。当第二个参数是一个函数时，它将在匹配元素队列的末尾添加一个函数。当第二个参数是函数数组时，它会用新的队列(函数数组)替换匹配元素的队列。可能，这个理解起来有点混乱，但是以后，我们会稍微看一下。

出列(名称):很容易理解，即从队列前端移除一个队列函数并执行。clearQueue([queueName]):是1.4中的一个新方法。清空所有尚未在对象上执行的队列。该参数是可选的，默认值是fx。但是，个人认为，这个方法不是很有用。clearQueue方法可以通过用Queue()方法传入两个参数中的第二个参数来实现。现在，我们要实现这样的效果，有标有1到7的数字框，这7个框需要从左到右依次落下。点击此处查看演示。

我不会发布css和html部分，它们包含在DEMO中。如果按照常规做法，可能需要用下面的jQ代码来实现：

$('.一个')。延迟(500)。animate({top:'=270px'}，500，function(){$(')。两个')。延迟(500)。animate({top:'=270px'}，500，function(){$(')。三')。延迟(500)。animate({top:'=270px'}，500，function(){$(')。四个')。延迟(500)。animate({top:'=270px'}，500，function(){$(')。五')。延迟(500)。animate({top:'=270px'}，500，function(){$(')。六')。延迟(500)。animate({top:'=270px'}，500，Function () {$(')。七')。animate ({top:'=270px'}，500，function () {alert('落体结束依次！“是的，”)});});});});});});});嗯，是的，效果呈现得很完美，但是你能忍受这个令人眩晕的代码吗？即使可以容忍，如果想改变执行顺序呢，比如你想5掉然后开始掉3，或者加8到15个新方块？重写？小心纪纪在里面的变化？显然，我们需要另一种简单方便的方法来达到这个效果，那就是jQuery队列控制方法。请参见下面的代码：

var _slideFun=[function(){$(')。一个')。延迟(500)。animate({top:'=270px'}，500，_ TakeNe)；}，function(){$('。两个')。延迟(300)。animate({top:'=270px'}，500，_ TakeNe)；}，function(){$('。三')。延迟(300)。animate({top:'=270px'}，500，_ TakeNe)；}，function(){$('。四个')。延迟(300)。animate({top:'=270px'}，500，_ TakeNe)；}，function(){$('。五')。延迟(300)。animate({top:'=270px'}，500，_ TakeNe)；}，function(){$('。六')。延迟(300)。animate({top:'=270px'}，500，_ TakeNe)；}，function () {$('。七')。延迟(300)。animate ({top:'=270px'}，500，function () {alert('落体结束依次！“是的，”);});}];$('#demo ')。队列(' slideList '，_ slide fun)；var _ TakeOne=function(){ $(' # demo ')。出列('幻灯片列表')；};_ TakeOne()；这样，是不是显得简单多了？如何实现？1.创建一个新数组，依次放入动画函数(这样改变顺序添加动画是不是方便多了？);2.使用队列将这组动画函数数组添加到slideList队列中；使用出列取出slideList队列中的第一个函数并执行；4.最初执行第一个函数。DEMO中也有详细的注释。如果以上说明仍不清楚，请参考源代码。至于clearQueue()方法，我就不多说了。在演示中，停止按钮调用clearQueue()方法。当然也可以使用queue()方法直接将当前函数队列替换为[]的空数组(个人推荐空数组代替更直观。).