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()方法直接将当前函数队列替换为[]的空数组(个人推荐空数组代替更直观。).
版权声明:jQuery队列控制方法queue()/queue()/clearQueue()的详细说明是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。