jQuery .dequeue() Method

What You’ll Learn

jQuery.dequeue(element [, queueName]) runs the next function waiting on an element’s queue. This tutorial covers the fx default, custom queue names, ending a custom .queue() step with $.dequeue(this), how it relates to .dequeue(), five examples, and try-it labs.

Introduction

jQuery keeps a queue of functions on each element — usually the fx effects queue that powers .animate(), fades, and slides. When one step finishes, the next should run.

Since jQuery 1.3, jQuery.dequeue(element [, queueName]) is the low-level utility that pulls the next function off that queue and executes it. Inside a custom .queue() callback you often see $.dequeue(this) so the chain can continue.

The official API notes that this is low-level: day to day you should prefer .dequeue() on a jQuery collection. Learn jQuery.dequeue so you can read docs and older samples, and so you understand what .dequeue() is doing under the hood. See also .queue() and the Utilities hub.

Understanding the jQuery.dequeue() Method

Call jQuery.dequeue(element) with a DOM element (not a jQuery object). jQuery removes the next function from that element’s queue and runs it. Pass an optional queueName; omit it to use "fx".

Custom queue functions must keep the pipeline moving. After your work (toggle a class, update text, start a timer), call jQuery.dequeue(this) or $(this).dequeue(). Skipping that call leaves later animations waiting forever.

📝 Syntax

Signature (jQuery 1.3+):

jQuery.dequeue( element [, queueName ] )

Parameters

• element (Element) — a DOM element whose queue should advance.
• queueName (String, optional) — queue to use. Defaults to "fx", the standard effects queue.

Return value

• undefined — the static utility does not return a jQuery object for chaining.

Typical use inside .queue()

$( "div" )
  .animate({ left: "+=200px" }, 2000 )
  .queue(function() {
    $( this ).toggleClass( "red" );
    jQuery.dequeue( this );   // or $( this ).dequeue();
  })
  .animate({ left: "10px" }, 700 );

Examples Gallery

Examples follow the official jQuery API pattern. Use View Output or Try It Yourself to explore each case.

$( "button" ).on( "click", function() {
  $( "div" )
    .animate({ left: "+=200px" }, 2000 )
    .animate({ top: "0px" }, 600 )
    .queue(function() {
      $( this ).toggleClass( "red" );
      $.dequeue( this );
    })
    .animate({ left: "10px", top: "30px" }, 700 );
});

Box slides right, moves up, toggles red, then returns
Without $.dequeue(this), the last animate would never start

$( "#box" )
  .fadeOut( 400 )
  .queue(function() {
    $( this ).text( "Hidden step done" );
    jQuery.dequeue( this );
  })
  .fadeIn( 400 );

Box fades out → text updates → fades back in
jQuery.dequeue(this) unlocks fadeIn

// Broken — fadeIn never starts
$( "#box" )
  .fadeOut( 300 )
  .queue(function() {
    $( this ).addClass( "done" );
    // forgot: jQuery.dequeue( this );
  })
  .fadeIn( 300 );

// Fixed
$( "#box" )
  .fadeOut( 300 )
  .queue(function() {
    $( this ).addClass( "done" );
    jQuery.dequeue( this );
  })
  .fadeIn( 300 );

Broken: fades out and stays hidden
Fixed: fades out, adds class, fades in again

var el = document.getElementById( "box" );

jQuery.queue( el, "tasks", function( next ) {
  $( el ).text( "Step 1" );
  next();
});
jQuery.queue( el, "tasks", function() {
  $( el ).text( "Step 2 — finishing with jQuery.dequeue" );
  jQuery.dequeue( el, "tasks" );
});

jQuery.dequeue( el, "tasks" ); // start the custom queue

Step 1
Step 2 — finishing with jQuery.dequeue

Custom queues do not auto-start; call dequeue to begin

// Static utility (this tutorial)
.queue(function() {
  $( this ).addClass( "a" );
  jQuery.dequeue( this );
})

// Preferred instance method
.queue(function() {
  $( this ).addClass( "b" );
  $( this ).dequeue();
})

// Clearest modern style
.queue(function( next ) {
  $( this ).addClass( "c" );
  next();
})

All three continue the queue the same way
Prefer .dequeue() or next() in new projects
jQuery.dequeue(this) matches many official samples

🚀 Common Use Cases

• Finish a custom .queue() step — toggle classes, update text, then continue animations.
• Official-style samples — follow docs that show $.dequeue(this).
• Raw DOM helpers — advance a queue when you already have an element reference.
• Named task queues — run non-fx sequences with jQuery.dequeue(el, name).
• Debugging stalled animations — check that every custom step dequeues.
• Learning effects — bridge to .dequeue() and .queue().

📝 Notes

• Added in jQuery 1.3; still available in modern jQuery 3.x.
• Official guidance: prefer .dequeue() over the static utility.
• First argument must be a DOM element — not a jQuery object or selector string.
• Default queue name is "fx".
• Custom .queue() callbacks must dequeue (or call next()) or the chain stalls.
• Built-in effects usually dequeue automatically when they finish.
• Returns undefined — unlike .dequeue(), which returns the collection.
• Related: jQuery.queue(), .clearQueue(), .delay().

💡 Best Practices