jQuery队列控制方法详解queue()/dequeue()/clearQueue()
先解释一下这组方法各自的含义.
queue(name,[callback]): 当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx); 当有两个参数传入时, 第一个参数还是默认为fx的的队列名, 第二个参数又分两种情况, 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).可能, 这个理解起来有点晕, 稍后, 后面会有点此查看DEMO.
dequeue(name): 这个好理解, 就是从队列最前端移除一个队列函数, 并执行它.
clearQueue([queueName]):这是1.4新增的方法. 清空对象上尚未执行的所有队列. 参数可选,默认为fx. 但个人觉得这个方法没多大用, 用queue()方法传入两个参数的第二种参数即可实现clearQueue方法.
现在, 我们要实现这样一个效果, 有标有1至7的数字方块, 要求这七个方块自左到右依次下落.点此查看DEMO
css与html部分我就不贴出来了,DEMO演示中有. 若按常规做法, 可能需要用如下jQ代码来实现:
$('.one').delay(500).animate({top:'+=270px'},500,function(){
$('.two').delay(500).animate({top:'+=270px'},500,function(){
$('.three').delay(500).animate({top:'+=270px'},500,function(){
$('.four').delay(500).animate({top:'+=270px'},500,function(){
$('.five').delay(500).animate({top:'+=270px'},500,function(){
$('.six').delay(500).animate({top:'+=270px'},500,function(){
$('.seven').animate({top:'+=270px'},500,function(){
alert('按序落体运动结束! Yeah!')
});
});
});
});
});
});
});
嗯, 没错, 效果很完美的呈现给出来了, 但这种晕眩的代码, 你能忍受吗? 即便可以忍受, 如果此时, 你想调换一个某个的执行顺序, 比如, 你想让5落下后再开始下落3, 或者新加8至15八个方块, 怎么办? 重写吗? 在里面小心冀冀的改吗? 显然, 我们需要另外一种列简明便捷的方法来实现这个效果, 那就是jQuery队列控制方法.请看如下代码:
var _slideFun=[
function(){$('.one').delay(500).animate({top:'+=270px'},500,_takeOne);},
function(){$('.two').delay(300).animate({top:'+=270px'},500,_takeOne);},
function(){$('.three').delay(300).animate({top:'+=270px'},500,_takeOne);},
function(){$('.four').delay(300).animate({top:'+=270px'},500,_takeOne);},
function(){$('.five').delay(300).animate({top:'+=270px'},500,_takeOne);},
function(){$('.six').delay(300).animate({top:'+=270px'},500,_takeOne);},
function(){$('.seven').delay(300).animate({top:'+=270px'},500,function(){
alert('按序落体运动结束! Yeah!');
});}
];
$('#demo').queue('slideList',_slideFun);
var _takeOne=function(){
$('#demo').dequeue('slideList');
};
_takeOne();
这样一来, 看起来是不是简明多了. 如何实现?
1. 新建一个数组,把动画函数依次放进去(这样更改顺序,新加动画是不是方便多了?);
2. 用queue将这组动画函数数组加入到slideList队列中;
3. 用dequeue取出slideList队列中第一个函数, 并执行它;
4. 初始执行第一个函数.
DEMO演示中也有详解的注释, 如果上面的说明还看不明白,请看源码.
至于clearQueue()方法,就不多说了, 演示中停止按钮调用的就是clearQueue()方法,当然你还可以用queue()方法直接将现在的函数列队替换成[]空数组实现(个人比较推荐空数组替换.,更直观).
相关文章
最近在做项目的时候用到了bootstrap，在使用中发现其data与jquery的data有些不一样的地方，记录一下，分享给大家2014-07-07
jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。2011-04-04
这篇文章主要为大家详细介绍了jquery实现抽奖功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
这篇文章主要介绍了jQuery实现的数值范围range2dslider选取插件特效，整体特效非常逼真自然，推荐给大家，有需要的小伙伴可以参考下2015-08-08
这篇文章主要介绍了jQuery实现默认是闭合的FAQ展开效果菜单,涉及jQuery中slideUp及slideDown用法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
astinus开发过程中，我自己就在不断的使用。有次贴了一些JS代码进去，于是页面显示错误。显然，把源代码直接放进html文本了——好吧，从05年转去做网游以后，一直没有正经的做过web了。2009-07-07
在表单的输入验证中，经常要当用户没能正确输入后，要提示“XXXX输入错误”这一类的信息，如何能搞到动态一点呢，今天发现jquery中的一个不错的效果，笔记之。2010-08-08
ajax联动框想必大家早有所耳闻，接下来将介绍jquery实现另一种形式的联动框，右边的联动框用jquery生成，仿照上篇的js方法修改的，感兴趣的你可以参考下希望可以帮助到你2013-03-03
网上常见的应用，用jQuery实现起来比较简单，只有几行代码。2011-03-03
这篇文章主要介绍了jQuery多个input求和的实现方法,涉及jQuery获取input表单元素值及运算的相关技巧,需要的朋友可以参考下2015-02-02
最新评论