Updated April 4, 2023
Introduction to jQuery queue
The jQuery queue() function is used to shows the queue of functions to be executed on the selected element. The jQuery queue() function is a built-in function in jQuery. The queue() function performs on a selector to know how many functions to execute; the queue represents one or more functions waiting to execute. The element has only one queue, the “fx” queue as the default queue in jQuery, but the element can have more than one queue. As the queue() function shows the queued function on the selected element, the dequeue() function removes the function from the queue from the elected element, so both of these functions are sometimes used together.
Syntax
$(selector).queue(qName);Parameters –
qName – This is an optional parameter that specifies the name of the queue. Whereas the default queue is “fx”.
Working of the jQuery queue() function
The jQuery queue() function uses the selector to show the queue of function to be executed on it. The selector can also be an element, id, or class. This function accepts one parameter that is the name of the queue. For example, to a div element, if we apply some functions like animate(), slide(), fade(), and all, so all these functions queued into the queue of the div element, and from the queue one by one all function executed on the div element.
Examples for the jQuery queue() function
Below are the example of the jQuery queue() function to show the length of the queue –
Next, we write the html code to understand the jQuery queue() function more clearly with the following example, where the queue() function is used to show the length of the div queue, as below –
Example #1
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery queue() function </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
</head>
<script>
$(document).ready(function() {
$( "#id1" ).click(function(){
var div_ele = $("div");
div_ele.animate( {height : 200, width : 200}, "slow" );
div_ele.animate( {height : 350, width : 350}, "slow" );
div_ele.slideUp(200);
div_ele.fadeIn( "fast" );
$( "h3" ).text("The length of the queue is : " + div_ele.queue().length );
});
});
</script>
<body>
<button id = "id1" > Click this button to get length of div queue </button>
<h3> </h3>
<div style="height : 200; width :200; background : blue; width : 15%; position : absolute;">
jQuery queue() for div element.
</div>
</body>
</html>Output:
Once we click on the “Click this button to get the length of div queue” button, the output is –
As in the above program, the four functions are applying to the div element, which gets queued into the queue of the div element. Later in the code, the length of this queue displays four, which are the same as the number of the function applied, as we can see in the output.
Example of jQuery queue() function to show the length of function queue which are applied in chaining –
Next, we write the html code to understand the jQuery queue() function, where the queue() function is used to show the length of the queue where functions are applied to div element in chaining, as below –
Example #2
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery queue() function </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
</head>
<script>
$(document).ready(function() {
$( "#id1" ).click(function(){
var div_ele = $("div");
div_ele.css("color", "red").slideUp(2000).slideDown(2000);
alert( "The length of the queue is : " + div_ele.queue().length );
});
});
</script>
<body>
<div id = "id1" style="height : 200; width :200; background : yellow; width : 15%; position : absolute;">
Click on me to get length of my queue
</div>
</body>
</html>Output:
Once we click on the yellow box, the output is –
And once we click the “ok” button, the output is –
As in the above program, the two functions are applying to the div element in chaining form(slideUp and slideDown), which gets queued into the queue of the div element. Later in the code, the length of this queue displays two, which are the same as the number of the function applied, as we can see in the output.
Example to show the use of queue() and dequeue() function together –
Next, we write the html code to understand the jQuery queue() function, where the queue() function and dequeue() function use together on the div element, as below –
Example #3
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery queue() function </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
</head>
<script>
$(document).ready(function() {
$( "#id1" ).click(function(){
var div_ele = $("div");
div_ele.css("color", "green").slideUp(2000).slideDown(2000);
div_ele.slideUp(2000);
$( "h3" ).text( "The length of the queue is : " + div_ele.queue(“fx”).length );
});
$( "#id2" ).click(function(){
var div_ele = $("div");
div_ele.dequeue();
$( "h3" ).text( "The length of the queue is : " + div_ele.queue().length );
});
});
</script>
<body>
<button id = "id1" > Click this button to get length of div queue </button>
<button id = "id2" > Click this button to remove function from div queue </button>
<h3> </h3>
<div id = "id1" style="height : 200; width :200; background : yellow; width : 15%; position : absolute;">
Click on me to get length of my queue
</div>
</body>
</html>Output:
Once we click the “Click this button to get the length of div queue” button, the output is –
And once we click the “Click this button to remove the function from div queue” button, the output is –
As in the above program, the two buttons are created, first is to apply the functions to the div element and get the length of the queue of the div element. The second is to remove functions from the queue of the div element. So, when we click the first button, then “the length of the queue is :3” displays, and when we click the second button, the “the length of the queue is :0” displays, as we can see in the output also.
Conclusion
The jQuery queue function is a built-in function in jQuery, which is used to shows the queue of functions to be executed on the selected elements.
Recommended Articles
This is a guide to the jQuery queue. Here we discuss the Working of the jQuery queue() function and Examples along with the codes and outputs. You may also have a look at the following articles to learn more –
