🚨 Time is Running Out: Reserve Your Spot in the Lucky Draw & Claim Rewards! START NOW

Code has been added to clipboard!

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

Reading time 2 min
Published Jul 3, 2019
Updated Sep 30, 2019

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);

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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:

Example
$("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.