jQuery .queue() Method

Beginner

7 min read

Updated: Oct 2026

5 examples

Live preview

jQuery .queue() method — read, add, or replace the fx animation queue

Definition

What Is `.queue()`?

.queue() (since jQuery 1.2) shows, adds to, or replaces the function queue on matched elements. The default queue name is "fx" — the effects pipeline used by .animate(), .fadeIn(), and similar methods.

Remember

$el.queue()                 // read → Array (default "fx")
$el.queue(function (next) { // add step
  // work…
  next();                   // or $(this).dequeue()
});
$el.queue("fx", []);        // replace / empty pending

// $("#foo").slideUp().fadeIn()
// → slideUp runs now; fadeIn waits on fx

Need	Use
Inspect pending steps	`$el.queue("fx").length`
Add a custom step	`$el.queue(fn)` + `next()`
Clear pending	`$el.queue("fx", [])` or `.clearQueue()`
Run next step	`.dequeue()` / `next()`
Pause between effects	`.delay()`

Approach

How to Use `.queue()`

Pick the overload you need: read, add, or replace — then keep the pipeline moving with next().

Chain effects on an element (they land on the fx queue).
Read with .queue() / .queue("fx") to get the pending Array.
Add a custom step with .queue(function (next) { … next(); }).
Or replace pending work with .queue("fx", []).
For named queues (not fx), call .dequeue("name") to start.

Piece	Required?	Role
`queueName`	No	Defaults to `"fx"`
`callback`	For add	Function to append; gets `next` since 1.4
`newQueue`	For replace	Array of functions (use `[]` to empty)
Return (read)	—	`Array` of pending functions
Return (add/replace)	—	jQuery object (chainable)

Pseudocode

queueName = queueName or "fx"

// Read
return array of pending functions on that queue

// Add callback
append callback to the end of the queue
when it runs:
    do work
    must call next() or .dequeue(queueName)
    otherwise later steps never start

// Replace
set queue contents = newQueue array
([] → no pending steps left)

return jQuery set (add/replace) or Array (read)

Reference

Cheat Sheet

Keep these facts handy while building effect chains.

Topic	Detail
Read	`.queue([name])` → `Array`
Add	`.queue([name], fn)` → jQuery
Replace	`.queue([name], array)` → jQuery
Since	jQuery 1.2 (`next` arg since 1.4)
Default name	`"fx"`
Keep moving	`next()` or `.dequeue()`
Empty pending	`.queue("fx", [])` · `.clearQueue()`
Named queues	Must `.dequeue("name")` to start

Try it

Live Preview

Start a short chain and watch .queue("fx").length change. Clear with [] anytime.

Chain: fadeOut → fadeIn → animate margin. Length shows how many fx steps are still waiting.

Result

Ready — start a chain, then read length.

Code

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

Example 1 — Read `fx` Queue Length

Official idea: poll .queue("fx").length while a chain runs.

jQuery

var $box = $("#box");

function runIt() {
  $box
    .fadeIn("slow")
    .animate({ marginLeft: 120 }, 1500)
    .fadeOut("slow")
    .fadeIn(800, runIt);
}

function showIt() {
  $("#len").text($box.queue("fx").length);
  setTimeout(showIt, 100);
}

runIt();
showIt();

Try It Yourself

How It Works

Chain. Each effect pushes a step onto fx.
Read. .queue("fx") returns the pending function array.
Length. .length is how many steps still wait.
Poll. Updating every 100 ms shows the queue shrink live.

Example 2 — Add Queued Steps Mid-Chain

Official pattern: insert custom work between animations; call .dequeue().

jQuery

$("#run").on("click", function () {
  $("#box")
    .fadeIn("slow")
    .animate({ marginLeft: 120 }, 1500)
    .queue(function (next) {
      $(this).text("Mid-step");
      next();
    })
    .animate({ marginLeft: 0 }, 500)
    .queue(function (next) {
      $(this).text("Done");
      next();
    })
    .fadeOut();
});

Try It Yourself

How It Works

Insert. .queue(fn) places a step after the previous effect.
Work. Update the DOM inside the callback.
Advance. Call next() (or .dequeue()).
Continue. The following animate / fadeOut can start.

Example 3 — After `slideUp` Without a Callback Param

Same timing as slideUp(callback), but the step is attached with .queue().

jQuery

$("#run").on("click", function () {
  var $foo = $("#foo").stop(true, true).show();

  $foo.slideUp();
  $foo.queue(function (next) {
    $("#status").text("Animation complete.");
    next();
  });
});

Try It Yourself

How It Works

Effect. slideUp() runs with no complete handler.
Queue. The next statement appends a function to fx.
Order. That function waits until slideUp finishes.
next(). Keeps the queue healthy if more steps follow.

Example 4 — Empty Pending with `.queue("fx", [])`

Official Stop pattern: replace the queue with [], then .stop().

jQuery

$("#start").on("click", function () {
  $("#box")
    .fadeIn("slow")
    .animate({ marginLeft: 160 }, 4000)
    .queue(function (next) {
      $(this).text("Mid");
      next();
    })
    .animate({ marginLeft: 0 }, 1500)
    .fadeOut();
});

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

Try It Yourself

How It Works

Replace. [] wipes every not-yet-run function.
Stop. .stop() ends the animation currently playing.
Together. Pending + current are both cancelled.
Alt. .clearQueue() clears pending without replacing the array yourself.

Example 5 — Named Custom Queue `"tasks"`

Isolate non-effect work from fx; start it with .dequeue("tasks").

jQuery

var $el = $("#worker");

$el.queue("tasks", function (next) {
  $("#log").append("Task A\n");
  next();
});
$el.queue("tasks", function (next) {
  $("#log").append("Task B\n");
  next();
});

$("#log").text("Pending: " + $el.queue("tasks").length + "\n");
$el.dequeue("tasks");

Try It Yourself

How It Works

Name. "tasks" is separate from the effects queue.
Add. Each .queue("tasks", fn) appends a step.
Read. .queue("tasks").length counts pending work.
Start. Custom queues do not auto-run — call .dequeue("tasks").

Edge Cases & Pitfalls

Common mistakes that stall or clear the wrong queue.

stall

Forgot `next()` / `.dequeue()`

Custom queue functions that never advance leave later effects stuck forever.

named

Named queues do not auto-start

Unlike fx, you must call .dequeue("name") to run the first function.

[]

`[]` clears pending, not the current tween

Pair with .stop() (or .finish()) when you also need to halt the active animation.

read

Read overload returns an Array

Do not chain jQuery methods on the result of .queue() with no args — use .length on the array.

vs clear

`.clearQueue()` vs `.queue("fx", [])`

Both drop pending items. Prefer .clearQueue() when you only need to empty — clearer intent.

Compatibility

Browser Support

.queue() has been part of jQuery since 1.2 (the next callback argument since 1.4). It works in every browser that runs your loaded jQuery version — no separate browser feature flag.

✓ Stable · jQuery 1.2+

jQuery .queue()

Supported across jQuery 1.x, 2.x, and 3.x. Prefer a current jQuery 3.x build. Queue behavior is part of jQuery’s fx engine.

100% With jQuery

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

.queue() Universal

Bottom line: Safe for everyday effect chains. Always call next()/dequeue() in custom steps, and clear with [] or .clearQueue() when cancelling.

Analysis

Performance Notes

Approach	Cost	Best for
Short effect chains	Cheap	Typical UI motion
Huge pending queues	Wasted work	Clear with `[]` / `.clearQueue()`
Polling `.queue().length`	Fine for demos	Avoid tight loops in production

Queues themselves are inexpensive. Cost comes from the animations waiting in them — cancel early when the user navigates away or spam-clicks a control.

Remember

Key Takeaways

Role: read, add, or replace the function queue (default fx).
Three forms: Array read · callback add · array replace.
Rule: custom steps must call next() or .dequeue().
Cancel: .queue("fx", []) + .stop() (or use .clearQueue()).

One line: .queue() is the control panel for waiting functions — inspect, append, or replace the line, and always advance custom steps.

Frequently Asked Questions

What does jQuery .queue() do?

.queue() shows, adds to, or replaces the function queue on matched elements. With no callback or array it returns an Array of pending functions. With a callback it appends that function. With an array it replaces the entire queue contents.

What are the three overloads of .queue()?

1) .queue([queueName]) — returns Array (default queueName "fx"). 2) .queue([queueName], callback) — adds a function; returns jQuery; callback receives next() since 1.4. 3) .queue([queueName], newQueue) — replaces the queue with an Array (e.g. [] to empty it).

What is the fx queue?

"fx" is jQuery’s default effects queue. Methods like .slideUp(), .fadeIn(), and .animate() push steps onto fx and run them one at a time. Chaining $("#foo").slideUp().fadeIn() runs slideUp first; fadeIn waits until slideUp finishes.

Why must custom .queue() callbacks call .dequeue() or next()?

When jQuery runs a function you added with .queue(fn), it pauses until you signal completion. Call $(this).dequeue() or the next() argument so the following step can run. Without that signal, the chain stalls.

How is .queue(fn) different from an animation callback?

.queue(fn) adds a standalone step at the end of the queue — useful when the previous method has no callback parameter. An animate/slideUp callback runs when that specific animation completes. Both can sit mid-chain; .queue() works with any chained method.

What does .queue("fx", []) do?

It replaces the fx queue with an empty array, removing all pending functions that have not yet run. Pair with .stop() to also halt the current effect. .clearQueue() is a dedicated API for clearing pending items.

Next: .dequeue() Method

Run the next function in a queue — the partner to .queue() for custom pipelines.

.dequeue() tutorial →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

10 people found this page helpful

jQuery jQuery.speed() Method jQuery .dequeue() Method

jQuery .queue() Method

What Is .queue()?

How to Use .queue()

Pseudocode

Cheat Sheet

Live Preview

jQuery Examples

Example 1 — Read fx Queue Length

How It Works

Example 2 — Add Queued Steps Mid-Chain

How It Works

Example 3 — After slideUp Without a Callback Param

How It Works

Example 4 — Empty Pending with .queue("fx", [])

How It Works

Example 5 — Named Custom Queue "tasks"

How It Works

Edge Cases & Pitfalls

Forgot next() / .dequeue()

Named queues do not auto-start

[] clears pending, not the current tween

Read overload returns an Array

.clearQueue() vs .queue("fx", [])

Browser Support

jQuery .queue()

Performance Notes

Key Takeaways

Frequently Asked Questions

Related Topics

.dequeue()

.clearQueue()

.delay()

.finish()

.stop()

.animate()

Next: .dequeue() Method

About the author

What Is `.queue()`?

How to Use `.queue()`

Example 1 — Read `fx` Queue Length

Example 3 — After `slideUp` Without a Callback Param

Example 4 — Empty Pending with `.queue("fx", [])`

Example 5 — Named Custom Queue `"tasks"`

Forgot `next()` / `.dequeue()`

`[]` clears pending, not the current tween

`.clearQueue()` vs `.queue("fx", [])`