jQuery .dequeue() Method

What You’ll Learn

The .dequeue() instance method removes the next function from a jQuery queue and runs it immediately. This tutorial covers syntax, the default fx effects queue, comparisons with next(), .clearQueue(), and automatic fx advancement, the official animate + toggleClass demo, stalled-queue debugging, named custom queues, and five hands-on examples.

Introduction

jQuery chains animations and callbacks on a per-element queue. When you call .animate() or .queue(fn), steps land on the default fx effects queue and run one at a time. Built-in effects auto-advance when each step finishes.

.dequeue(), available since jQuery 1.2, manually executes the next queued function — it removes that function from the array and runs it. Custom callbacks added with .queue() must call .dequeue() or invoke the next parameter so later steps are not left waiting forever.

Understanding the .dequeue() Method

.dequeue( [queueName] ) is an instance method on jQuery collections. It accepts an optional String queue name (default "fx") and returns a jQuery object.

It does not run every pending item — only the next one. To drop all waiting functions without executing them, use .clearQueue() instead.

📝 Syntax

General form of .dequeue:

jQuery( selector ).dequeue( [queueName] )

Parameters

• queueName (optional String) — name of the queue to advance. Defaults to "fx", the standard effects queue.

Return value

• A jQuery object — the same collection, so you can chain further methods.

Official jQuery API description

// Inside a custom queued callback — resume the fx pipeline
$("div").queue(function() {
  $(this).toggleClass("red").dequeue();
});
// Advance a named custom queue
$el.dequeue("tasks");

Examples Gallery

Each example demonstrates .dequeue() on real animation chains. Open DevTools or use the Try-it links. Example 1 mirrors the official jQuery API button demo.

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

Click: div moves right, moves top, toggles red class, animates back
Full chain completes because .dequeue() resumes after toggleClass

var $box = $( "#box" );
$( "#broken" ).on( "click", function() {
  $box
    .animate({ marginLeft: 100 }, 800 )
    .queue(function() {
      $box.addClass( "highlight" );
      // BUG: missing .dequeue() — final animate never runs
    })
    .animate({ marginLeft: 0 }, 800 );
});
$( "#fix" ).on( "click", function() {
  $box
    .clearQueue()
    .stop()
    .animate({ marginLeft: 100 }, 800 )
    .queue(function() {
      $box.addClass( "highlight" );
      $( this ).dequeue();
    })
    .animate({ marginLeft: 0 }, 800 );
});

Broken: box moves right, gets highlight, stops — never returns
Fix: full round-trip animation completes after .dequeue()

$( "#go" ).on( "click", function() {
  $( "#panel" )
    .fadeIn( 400 )
    .queue(function( next ) {
      $( this ).text( "Loaded!" );
      next();
    })
    .fadeOut( 400 );
});

Panel fades in, text updates to "Loaded!", fades out
next() advances the queue — same effect as .dequeue()

var $el = $( "#worker" );
$el.queue( "tasks", function() {
  console.log( "task A queued" );
  $el.dequeue( "tasks" );
});
$el.queue( "tasks", function() {
  console.log( "task B queued" );
  $el.dequeue( "tasks" );
});
// Kick off the tasks queue — runs task A, then task B
$el.dequeue( "tasks" );

task A queued
task B queued

var $log = $( "#log" );
$log.queue(function() {
  console.log( "Step 1" );
  $( this ).dequeue();
});
$log.queue(function() {
  console.log( "Step 2" );
  $( this ).dequeue();
});
$log.queue(function() {
  console.log( "Step 3" );
  $( this ).dequeue();
});
$log.dequeue();

Step 1
Step 2
Step 3

🚀 Common Use Cases

• Mid-animation DOM updates — toggle classes, swap text, or measure layout between .animate() steps.
• Custom fx callbacks — resume the pipeline after non-animation work in a .queue() function.
• Named serial tasks — advance a tasks queue independently of effects.
• Plugin hooks — let third-party code inject steps into an animation chain safely.
• Async handoff — call .dequeue() or next() after a timeout or AJAX callback completes.
• Debugging stalled chains — verify every custom queued function signals completion.

📝 Notes

• Available since jQuery 1.2; returns the jQuery collection (chainable).
• Default queue name is "fx" — the standard effects queue.
• Removes the next function from the queue, then runs it — one step per call.
• Custom .queue() callbacks must call .dequeue() or next() to continue.
• Built-in effects like .animate() auto-dequeue — manual calls are for custom callbacks.
• Use .clearQueue() to drop pending items without executing them.

💡 Best Practices