网站地图
【www.gdgbn.com--jquery】
jq queue()/dequeue()/clearqueue()控制方法详解
先看实例
js html代码
01
02
03
04
05
06
07
<script src="</script">http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
/*******************************
* @author mr.think
* @author blog http://mrthink.net/
* @2010.11.16
* @可自由转载及使用,但请注明版权归属
*******************************/
$(function(){
//可用animate()方法如此眩晕地实现
// $(".one").delay(500).animate({top:"+=290px"},500,function(){
// $(".two").delay(500).animate({top:"+=290px"},500,function(){
// $(".three").delay(500).animate({top:"+=290px"},500,function(){
// $(".four").delay(500).animate({top:"+=290px"},500,function(){
// $(".five").delay(500).animate({top:"+=290px"},500,function(){
// $(".six").delay(500).animate({top:"+=290px"},500,function(){
// $(".seven").animate({top:"+=290px"},500,function(){
// alert("按序落体运动结束! yeah!")
// });
// });
// });
// });
// });
// });
// });//还可以利用queue()方法简明自如的实现
var _slidefun=[
//把要执行的动画依次放入一个数组
function(){$(".one").delay(500).animate({top:"+=290px"},500,_takeone);},
function(){$(".two").delay(300).animate({top:"+=290px"},500,_takeone);},
function(){$(".three").delay(300).animate({top:"+=290px"},500,_takeone);},
function(){$(".four").delay(300).animate({top:"+=290px"},500,_takeone);},
function(){$(".five").delay(300).animate({top:"+=290px"},500,_takeone);},
function(){$(".six").delay(300).animate({top:"+=290px"},500,_takeone);},
function(){$(".seven").delay(300).animate({top:"+=290px"},500,function(){
alert("按序落体运动结束! yeah!");
});}
];
//将函数数组放入slidelist动画队列
$("#demo").queue("slidelist",_slidefun);
var _takeone=function(){
//取出第一个函数,并执行它
$("#demo").dequeue("slidelist");
};
//初始执行第一个函数
_takeone();
$(":button").click(function(){
$(this).val("刷新重试").attr("disabled",true).css教程("color","#ccc");
//停止也可用载入空数组实现$("#demo").queue("slidelist",[]);
$("#demo").clearqueue("slidelist");
});
});
</script>
queue(name,[callback]): 当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx); 当有两个参数传入时, 第一个参数还是默认为fx的的队列名, 第二个参数又分两种情况, 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数. 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组).可能, 这个理解起来有点晕, 稍后, 后面会有点此查看demo.
dequeue(name): 这个好理解, 就是从队列最前端移除一个队列函数, 并执行它.
clearqueue([queuename]):这是1.4新增的方法. 清空对象上尚未执行的所有队列. 参数可选,默认为fx. 但个人觉得这个方法没多大用, 用queue()方法传入两个参数的第二种参数即可实现clearqueue方法.
现在, 我们要实现这样一个效果, 有标有1至7的数字方块, 要求这七个方块自左到右依次下落
$(".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();
. 新建一个数组,把动画函数依次放进去(这样更改顺序,新加动画是不是方便多了?);
2. 用queue将这组动画函数数组加入到slidelist队列中;
3. 用dequeue取出slidelist队列中第一个函数, 并执行它;
4. 初始执行第一个函数.
demo演示中也有详解的注释, 如果上面的说明还看不明白,请看源码.
至于clearqueue()方法,就不多说了, 演示中停止按钮调用的就是clearqueue()方法,当然你还可以用queue()方法直接