queue(), dequeue() and clearQueue()
Queues are the foundation for all animations in jQuery , they allow a series functions to be executed asynchronously on an element. You can use them for any purpose you like. They are an array of functions stored on a per element basis, using jQuery.data() . They are First-In-First-Out (FIFO). example
div.animate({height: 300,width: 300}, "slow");
div.animate({height: 150,width: 150}, "slow");
div.fadeOut("slow");
div.fadeIn("slow");
You can add a function to the queue by calling .queue() , and you remove (by calling) the functions using .dequeue() . If you write multiple animate method calls one after the other, jQuery creates an 'internal' queue and adds these method calls to it. Then it runs those animate calls one by one.
example
Browser ViewThe queue length is :
jQuery queue()
<html>
<head>
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btnAnimate").click(function(){
var div = $("div");
div.animate({height: 300,width: 300}, "slow");
div.animate({height: 150,width: 150}, "slow");
div.fadeOut("slow");
div.fadeIn("slow");
$("p").text("The queue length is : " + div.queue().length);
});
});
</script>
</head>
<body>
<button id="btnAnimate">Start Animation</button>
<p></p>
<div style="height: 100; width:100;background: red;width:10%;position:absolute;">
jQuery queue()
</div>
</body>
</html>
Retrieving/Setting the queue
You can retrieve a reference to a jQuery queue by calling .queue() without a function argument. You can use the method if you want to see how many items are in the queue. You can use push, pop, unshift, shift to manipulate the queue in place. You can replace the entire queue by passing an array to the .queue() function. example
// lets assume $elem is a jQuery object that points to some element we are animating.
var queue = $elem.queue();
// remove the last function from the animation queue.
var lastFunc = queue.pop();
// insert it at the beginning:
queue.unshift(lastFunc);
// replace queue with the first three items in the queue
$elem.queue(queue.slice(0,3));
jQuery dequeue()
jQuery does not have any insight into how the queue items function; as such, we need to explicitly tell jQuery when to move to the next item in the queue. This can be done with the the dequeue() method. With this method, you can call the dequeue() method on the given element with the given queue name. In a queue there will be a several function waiting to run dequeue() used to remove the top function from the queue and execute that function.
div.animate({height: 300,width: 300}, "slow");
div.animate({height: 150,width: 150}, "slow");
div.queue(function () {
div.css("background-color", "green");
div.dequeue();
});
To ensure that process is running, you must make sure that this method should be called only after the addition of a function with queue() method . If nothing is passed as an argument, then the deQueue method will remove the functions from the standard effects queue.
Browser ViewThe queue length is :
jQuery dequeue()
<html>
<head>
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btnAnimate").click(function(){
var div = $("div");
div.animate({height: 300,width: 300}, "slow");
div.animate({height: 150,width: 150}, "slow");
div.queue(function () {
div.css("background-color", "green");
div.dequeue();
});
div.fadeOut("slow");
div.fadeIn("slow");
$("p").text("The queue length is : " + div.queue().length);
});
});
</script>
</head>
<body>
<button id="btnAnimate">Start Animation</button>
<p></p>
<div style="height: 100; width:100;background: red;width:10%;position:absolute;">
jQuery dequeue()
</div>
</body>
</html>
jQury clearQueue()
When the .clearQueue() method is called, all functions on the queue that have not been executed are removed from the queue. If there's a current animation (for example) taking place, it is not affected. But any queued items will not execute. When used without an argument, .clearQueue() removes the remaining functions from fx, the standard effects queue. Browser View
jQuery dequeue()
<html>
<head>
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btnStart").click(function(){
var div = $("div");
div.animate({height: 600,width: 800}, 2000);
div.animate({height: 150,width: 200}, 2000);
});
$("#btnStop").click(function(){
var div = $("div");
div.clearQueue();
});
});
</script>
</head>
<body>
<button id="btnStart">Start Animation</button>
<button id="btnStop">Stop Animation</button>
<div style="height:150;width:200;background:green;position:absolute;">
jQuery dequeue()
</div>
</body>
</html>
In this way dequeue() is similar to .stop(true). However, while the .stop() method is meant to be used only with animations, .clearQueue() can also be used to remove any function that has been added to a generic jQuery queue with the .queue() method.
Related Topics