队列实现是jQuery非常棒的一个拓展，使用动画队列可以使动画更容易实现。本文将详细介绍jQuery动画队列的queue()方法
队列的本质是一个数组，对队列的理解先从数组的push和shift开始。push是从数组尾端插入新的元素，shift是从数组首端删除元素；分别对应队列中得queue和dequeue。
jquery所有动画基于animate方法，而animate的动画默认保存在名为fx的动画队列中。
queue就是将动画放进队列中，dequeue就是将动画从队列中删除并执行它。
queue()
queue()方法用来显示在匹配的元素上的已经执行的函数队列
queue([queueName])
queue()方法可以接受一个可选参数——一个含有队列名的字符串。该参数默认是'fx'
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="../js/jquery-1.11.3.min.js"></script>
<button id="btn">开始动画</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).animate({'left':'0'},1000).animate({'width':'100px'},1000);
});
</script>
</body>
</html>
queue(callback(next))
queue()方法可以接受一个回调函数作为参数，表示将要添加到队列中的新函数
[注意]queue()方法的回调函数中，可以进行样式变换等，但不可以增加动画效果
由下面代码执行结果可以看出，队列执行完函数后，队列后面的动画效果被停止，这时就需要用到下面要介绍的dequeue()方法
<!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="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(){
$('#box').css('background','lightgreen');
})
$('#box').animate({'left':'0'},1000).animate({'width':'100px'},1000);
});
</script>
</body>
</html>
dequeue()
dequeue()方法用来执行匹配元素队列的下一个函数
dequeue([queueName])
dequeue()方法可以接受一个可选参数——一个含有队列名的字符串，默认是fx
[注意]dequeue()方法本身也算队列的一员
<!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="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);
});
</script>
</body>
</html>
原文链接：https://www.qiquanji.com/post/6997.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知