jQuery队列操作方法实例
jQuery核心中,有一组队列控制方法,这组方法由queue()/dequeue()/clearQueue()三个方法组成,它对需要连续按序执行的函数的控制可以说是简明自如,主要应用于animate()方法,ajax以及其他要按时间顺序执行的事件中.
先解释一下这组方法各自的含义.
queue(name,[callback]):当只传入一个参数时,它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx);当有两个参数传入时,第一个参数还是默认为fx的的队列名,第二个参数又分两种情况,当第二个参数是一个函数时,它将在匹配的元素的队列最后添加一个函数.当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).可能,这个理解起来有点晕.
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.初始执行第一个函数.
至于clearQueue()方法,就不多说了,演示中停止按钮调用的就是clearQueue()方法,当然你还可以用queue()方法直接将现在的函数列队替换成[]空数组实现(个人比较推荐空数组替换.,更直观).