How and When to Use jQuery .queue(), .dequeue(), and .clearQueue()

jQuery queue: Main Tips

• jQuery animation queue represents effects waiting to be executed.
• The .queue() method shows the functions queued on the selected items' default queue (fx), or other queues.
• The .dequeue() method removes a function from the specified queue and executes it.
• The .clearQueue() method removes all animations from the queue on the selected element.

Using the .queue() Method

The jQuery .queue() reveals the methods queued on the selected items' default fx queue, or other queues. After clicking the button in the example below, animations start, and the total number of them is displayed:

The syntax for jQuery .queue() is as follows:

$("selector").queue(queue);

Explanation of .dequeue()

What does .dequeue() do? It removes a function from the specified jQuery animation queue and executes it. In the example below, you can see the method changing the size and color of the element:

Here is the syntax you would use for jQuery .dequeue():

$("selector").dequeue(queue);

Introducing .clearQueue()

To remove all animations from the queue on the selected element, use .clearQueue(). In the example below, you may start the first animation, and prevent the second one from executing by clicking the button:

$("button").click(() => {
    $("div").clearQueue();
});

Here is the syntax you would use for this method:

$("selector").clearQueue(queue);

Note: in all of these cases, the syntax takes a single argument, defining the name of the jQuery animation queue. The default value is the standard effects queue fx.