jQuery核心中, 有一组队列控制方法, 这组方法由queue()/dequeue()/clearQueue()三个方法组成, 它对需要连续按序执行的函数的控制可以说是简明自如, 主要应用于animate ()方法, ajax以及其他要按时间顺序执行的事件中。
clearQueue()
与deQueue()方法相反，clearQueue()方法用来从列队中移除所有未执行的项
[注意]clearQueue()并不影响当前动画效果
clearQueue([queueName])
1、clearQueue()方法可以接受一个可选参数——一个含有队列名的字符串，默认是fx
2、这是1.4新增的方法. 清空对象上尚未执行的所有队列. 参数可选,默认为fx. 但个人觉得这个方法没多大用, 用queue()方法传入两个参数的第二种参数即可实现clearQueue方法.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="jquery-1.11.3.min.js"></script>
<button id="btn">开始动画</button>
<button id="btn1">停止动画</button>
<button id="reset">恢复</button>
<span id="result"></span>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
history.go();
})
$('#btn').click(function(event){
setInterval(function(){
$('#result').html('队列数是:' +$('#box').queue().length)
},100)
$('#box').animate({'left':'100px'},1000).animate({'width':'200px'},1000);
$('#box').queue(function(){
$(this).css('background','lightgreen');
$(this).dequeue();
})
$('#box').animate({'left':'0'},1000).animate({'width':'100px'},1000);
});
$('#btn1').click(function(event){
$('#box').clearQueue();
})
</script>
</body>
</html>
原文链接：https://www.qiquanji.com/post/6996.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知