queue() 方法, dequeue() 方法
元素可以有多个队列附加到它们上，我们可以为每个队列赋予不同的名称。我们可以 指定一个自定义队列名称 作为.queue()方法的第一个参数。
官方文档：Elements can have multiple queues attached to them, and we can give each of these queues a different name. We can specify a custom queue name as the first argument to the .queue() method.
队列是 jQuery 中所有动画的基础，它们允许在一个元素上异步执行一系列函数，当使用.animate()时，此方法会利用队列构建一系列步骤，这些步骤将在整个动画期间转换一个或多个CSS值。
官方文档：Queues are the foundation for all animations in jQuery, they allow a series functions to be executed asynchronously on an element. Methods such as .slideUp(), .slideDown(), .fadeIn(), and .fadeOut() all use .animate(), which leverages queues to build up the series of steps that will transition one or more CSS values throughout the duration of the animation.
jquery 对队列项的功能没有明确排序，因此我们需要调用 .dequeue() ，它告诉 jquery 何时移动到队列中的下一个项。因此，queue() 方法通常与 dequeue() 方法一起使用。
官方文档：jQuery does not have any insight into how the queue items function, so we need to call .dequeue(), which tells jQuery when to move to the next item in the queue.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>queue(),dequeue(),clearQueue()</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$("#start").click(function(){
var div = $("div");
div.animate({height:60},"slow");
div.animate({width:60},"slow");
/* 以下两个 queue() 方法经过 dequeue() 排序后才能执行*/
/* 定义 queue() 方法的名字为 utf */
div.queue("utf",function () {
div.css("background-color","red");
});
/* 定义 queue() 方法的名字为 utf */
div.queue("utf2",function () {
div.animate({width:80},"slow");
});
/* dequeue() 方法是向上查询，如果将dequeue() 方法放在 queue() 之前，
需要执行了一次之后，有了缓存，才能查询到 queue() 方法*/
/* 对名字为 utf2 的 queue 方法进行排序*/
div.dequeue("utf2");
/* 对 utf 的 queue() 方法排序*/
div.dequeue("utf");
div.animate({height:20},"slow");
div.animate({width:20},"slow");
});
});
</script>
</head>
<body>
<p>queue() 方法允许你创建一个队列功能区执行被选中的元素。 </p>
<p>dequeue() 方法顺序执行它们。 </p>
<p><button id="start">开始动画</button></p>
<div style="background:blue;height:20px;width:20px;">
</div>
</body>
</html>
<script>
$(document).ready(function(){
$("#start").click(function(){
var div = $("div");
div.animate({height:300},"slow");
div.animate({width:300},"slow");
div.queue(function () {
div.css("background-color","red");
/* 将 dequeue() 放在 queue() 方法的回调函数里面，则不用对方法命名*/
div.dequeue();
});
div.animate({height:100},"slow");
div.animate({width:100},"slow");
});
});
</script>
clearQueue() 方法
因为队列只是一组有序的操作，所以我们的应用程序可能有一些逻辑，需要防止剩余的队列条目继续执行。此方面可以通过调用 .clearQueue() 方法来实现这一点，该方法将清空对应的队列。
Since queues are just a set of ordered operations, our application may have some logic in place that needs to prevent the remaining queue entries from executing. We can do this by calling the .clearQueue() method, which will empty the queue.
与 .stop() 方法（只适用于动画）不同的是，.clearQueue() 方法移除任何排队的函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>queue(),dequeue(),clearQueue()</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$("#start").click(function(){
var div = $(".div");
div.animate({height:60},"slow");
div.animate({width:60},"slow");
div.queue("utf",function () {
div.animate({width:200},"slow");
});
div.queue("utf2",function () {
div.animate({width:80},"slow");
});
div.dequeue("utf");
div.dequeue("utf2");
div.animate({height:20},"slow");
div.animate({width:20},"slow");
/*清除名称为 step的 .queue()的队列，如果对应的 dequeue()放在clearQueue()之前，
则对应名称的 dequeue() 至少执行一次，*/
$( ".box" ).queue( "steps", function( next ) {
console.log( "Will never log because we clear the queue" );
$(this).animate({height:40},"slow");
next();
}).clearQueue( "steps" ).dequeue( "steps" )
});
/* 如果 clearQueue() 没有作为 .queue().clearQueue() 使用，
则会清除全部 queue() 方法，并且不能加入名称，
例如，下面如果改成 clearQueue("utf") ，其清除作用会失效 */
$("#stop").click(function(){
div.clearQueue();
});
});
</script>
</head>
<body>
<p>queue() 方法允许你创建一个队列功能区执行被选中的元素。 </p>
<p>dequeue() 方法顺序执行它们。 </p>
<p><button id="start">开始动画</button></p>
<div class="div" style="background:blue;height:20px;width:20px;"></div>
<hr />
<div class="box" style="background:blue;height:20px;width:20px;"></div>
</body>
</html>
demo 实现动画的手动播放与暂停
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>queue(),dequeue(),clearQueue()</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
var div = $(".div");
$("#start").click(function(){
div.animate({height:60},"slow");
div.animate({width:60},"slow");
div.queue("utf",function () {
div.animate({width:200},"slow");
});
div.queue("utf2",function () {
div.animate({width:80},"slow");
div.css("background","red");
});
div.dequeue("utf");
div.dequeue("utf2");
div.animate({height:20},"slow");
div.animate({width:20},"slow");
$( ".box" ).queue( "steps", function( next ) {
console.log( "Will never log because we clear the queue" );
$(this).animate({height:40},"slow");
next();
} ).clearQueue( "steps" ).dequeue( "steps" )
});
$("#stop").click(function(){
div.clearQueue();
});
});
</script>
</head>
<body>
<p>queue() 方法允许你创建一个队列功能区执行被选中的元素。 </p>
<p>dequeue() 方法顺序执行它们。 </p>
<p><button id="start">开始动画</button><button id="stop">停止动画</button></p>
<div class="div" style="background:blue;height:20px;width:20px;"></div>
<hr />
<div class="box" style="background:blue;height:20px;width:20px;"></div>
</body>
</html>
Reference
Queue & Dequeue Explained
jQuery clearQueue() queue() dequeue()方法扫描二维码关注公众号，回复： 5037910 查看本文章