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

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
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

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.

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 22/01/2021
3176 People Used
Only 97 Left
Rating
5.0