jQuery Tutorial Tutorials - jQuery .queue()

The .queue() method in jQuery is used to manipulate the queue of functions to be executed on the matched elements.

jQuery .queue() syntax

.queue([queueName]);
.queue([queueName,]newQueue);
.queue([queueName,]callback);

.queue([queueName])

Show the queue of functions to be executed on the matched elements.

example

Get the length of the queue.
Be careful: jQuery 1.x and 3.x return different values.

var n = div.queue( "fx" );
console.log( n.length );

Try now

.queue([queueName,][newQueue|callback]);

Manipulate the queue of functions to be executed,it allows us to place a new function at the end of the queue.

$( "#block" ).animate({ left: "+=200" }, 2000 ).queue(function() {$(this).slideUp(1000).dequeue()});
//  is equivalent to:
$( "#block" ).animate({ left: "+=200" }, 2000 ).slideUp(1000);

$( "#foo" ).slideUp();
$( "#foo" ).queue(function() {
    alert( "Animation complete." );
    $( this ).dequeue();
});
//  is equivalent to:
$( "#foo" ).slideUp(function() {
    alert( "Animation complete." );
});

example

Because the addClass is not a animation, we can use queue() to add it to the queue.

Try now