jQuery .queue() Method

What You’ll Learn

jQuery.queue(element, …) shows or manipulates the function queue on a DOM element. This tutorial covers reading length, appending callbacks, replacing with an array, pairing with jQuery.dequeue(), how it relates to .queue(), five examples, and try-it labs.

Introduction

Every element can hold one or more queues of functions. In most apps you only use fx — the effects queue behind .animate(), .show(), and slides. Queues let steps run in order without blocking the rest of your script.

Since jQuery 1.3, jQuery.queue() is the low-level utility to inspect, append, or replace that list for a single DOM element. Official demos use it to print queue length, insert class toggles mid-chain, and clear pending work with an empty array.

Docs note this is low-level: prefer .queue() on a jQuery collection for day-to-day code. Learn the static form so you can read API samples and work when you already hold a raw node. Pair it with jQuery.dequeue() and the Utilities hub.

Understanding the jQuery.queue() Method

Always pass a DOM element first (for example $( "div" )[ 0 ]). Then either:

• Omit further args (or pass only queueName) to read the queue array.
• Pass queueName and a function to append a custom step.
• Pass queueName and an array to replace the entire queue.

When you append a function, that step must eventually call jQuery.dequeue(this) (or equivalent) so later animations continue.

📝 Syntax

Three signatures (jQuery 1.3+):

jQuery.queue( element [, queueName ] )
jQuery.queue( element, queueName, newQueue )
jQuery.queue( element, queueName, callback )

Parameters

• element (Element) — DOM node whose queue to read or change.
• queueName (String) — queue to use. Defaults to "fx" when reading; pass it explicitly when adding or replacing.
• newQueue (Array) — replaces the current queue contents (often [] to clear).
• callback (Function) — function appended to the end of the queue.

Return value

• Array — the queue of functions (when reading, and typically after manipulate forms in the API).

Read length (official pattern)

var n = jQuery.queue( $( "div" )[ 0 ], "fx" );
$( "span" ).text( "Queue length is: " + n.length );

Examples Gallery

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

$( "#show" ).on( "click", function() {
  var n = jQuery.queue( $( "div" )[ 0 ], "fx" );
  $( "span" ).text( "Queue length is: " + n.length );
});

Queue length is: N
(N shrinks as each fx step finishes)

var divs = $( "div" )
  .show( "slow" )
  .animate({ left: "+=200" }, 2000 );

jQuery.queue( divs[ 0 ], "fx", function() {
  $( this ).addClass( "newcolor" );
  jQuery.dequeue( this );
});

divs.animate({ left: "-=200" }, 500 );

jQuery.queue( divs[ 0 ], "fx", function() {
  $( this ).removeClass( "newcolor" );
  jQuery.dequeue( this );
});

divs.slideUp();

Box shows, slides right, turns blue, slides back,
removes blue, then slides up
Each custom step calls jQuery.dequeue(this)

$( "#stop" ).on( "click", function() {
  jQuery.queue( $( "div" )[ 0 ], "fx", [] );
  $( "div" ).stop();
});

Pending fx steps removed
Current animation halted with .stop()
Length after clear is typically 0

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" );
  jQuery.dequeue( el, "tasks" );
});

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

Step 1
Step 2

Custom queues do not auto-start — dequeue to begin

var el = $( "#box" )[ 0 ];

// Static utility (this tutorial)
var pending = jQuery.queue( el, "fx" );
jQuery.queue( el, "fx", function() {
  $( this ).text( "via jQuery.queue" );
  jQuery.dequeue( this );
});

// Preferred instance method
pending = $( el ).queue( "fx" );
$( el ).queue( "fx", function( next ) {
  $( this ).text( "via .queue()" );
  next();
});

Both read Array and both can append steps
Prefer .queue() / next() in new projects
jQuery.queue matches many official samples

🚀 Common Use Cases

• Debug long chains — print jQuery.queue(el, "fx").length while effects run.
• Insert mid-chain steps — toggle classes between animates (official Example 1).
• Stop pending work — replace with [] and call .stop().
• Named task queues — sequence non-fx jobs on an element.
• Raw DOM helpers — when you already have element, not a jQuery object.
• Learning effects — bridge to .queue() and jQuery.dequeue().

📝 Notes

• Added in jQuery 1.3; still available in modern jQuery 3.x.
• Official guidance: prefer .queue() over the static utility.
• First argument must be a DOM element.
• Default queue name is "fx".
• Callbacks you add must eventually dequeue (or call next()).
• Reading returns an Array — use .length to inspect size.
• jQuery.queue(el, "fx", []) clears pending items; pair with .stop() to halt the current effect.
• Related: .clearQueue(), .delay(), .dequeue().

💡 Best Practices