jQuery .dequeue() Run the Next Queued Function

Beginner
7 min read
Updated: Oct 2026
5 examples
Live preview
jQuery .dequeue() method — execute the next function on the fx or a named queue
Definition

What Is .dequeue()?

.dequeue() (since jQuery 1.2) removes the next function from a queue and runs it immediately. Default queue is "fx". Returns the jQuery object for chaining.

Remember
$el.dequeue();                 // advance fx
$el.dequeue("tasks");          // advance a named queue

// Classic custom step:
$el.queue(function () {
  $(this).addClass("done").dequeue();
});

// Modern equivalent:
$el.queue(function (next) {
  $(this).addClass("done");
  next();
});
NeedUse
Continue after a custom queue step$(this).dequeue() or next()
Add a custom step.queue(fn)
Drop pending steps (do not run them).clearQueue()
Halt current animation.stop()
Pause before the next step.delay()
Approach

How to Use .dequeue()

Add a custom step with .queue(), do your work, then call .dequeue() (or next()) so the chain continues.

  1. Chain effects on an element (.animate(…)).
  2. Insert a custom step with .queue(function () { … }).
  3. Inside that function, do non-animation work (toggle a class, update text).
  4. Call $(this).dequeue() or next() to run the next queued step.
  5. For a named queue, pass the same name: .dequeue("tasks").
PieceRequired?Role
Matched setYesElements whose queue you advance
queueNameNoDefaults to "fx"; pass a custom name when needed
Return value—jQuery object (chainable)

Pseudocode

Pseudocode
call $(elements).dequeue(queueName?)

name = queueName or "fx"

for each matched element:
    take the next function off queue "name"
    if a function was waiting:
        execute it now
        (that function should call dequeue/next
         so later steps keep running)

return the jQuery set for chaining
Reference

Cheat Sheet

Keep these facts handy while wiring custom queue steps.

TopicDetail
Syntax.dequeue( [queueName] )
SincejQuery 1.2
Default queue"fx"
DoesRemove next function → run it
Classic continue$(this).dequeue()
Modern continuenext() inside .queue(fn)
Named queue$el.dequeue("tasks")
vs clearQueueRuns next · clear drops without running
Auto for animate?Yes · custom .queue(fn) needs manual continue
Try it

Live Preview

Run the official-style chain: move → move → toggleClass + dequeue → return.

Box

The mid-chain queue step toggles a highlight class, then dequeue lets the return animation run.

Result
Ready — click Run to dequeue mid-chain.
Code

jQuery Examples

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

Example 1 — Official Animate + toggleClass

From the jQuery docs: insert a class toggle between animates and continue with .dequeue().

jQuery
$("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);
});
Try It Yourself

How It Works

  1. Animate. Two moves queue on fx and auto-advance.
  2. Custom step. .queue() runs your callback mid-chain.
  3. toggleClass. Non-animation work happens here.
  4. dequeue. Starts the final return animation.

Example 2 — Stalled Queue vs Fixed

Skip .dequeue() and the later animate never runs. Add it and the round-trip completes.

jQuery
// Broken — queue stalls after the class change
$box
  .animate({ marginLeft: 100 }, 800)
  .queue(function () {
    $box.addClass("highlight");
  })
  .animate({ marginLeft: 0 }, 800);

// Fixed — dequeue continues the chain
$box
  .animate({ marginLeft: 100 }, 800)
  .queue(function () {
    $box.addClass("highlight");
    $(this).dequeue();
  })
  .animate({ marginLeft: 0 }, 800);
Try It Yourself

How It Works

  1. Pause. Custom .queue() stops auto-advance.
  2. Broken. No continue signal → later animate waits forever.
  3. Fixed. .dequeue() removes the next step and runs it.
  4. Lesson. Always finish custom steps with dequeue or next().

Example 3 — Modern next() Pattern

Same continue behavior: pass next into the queue callback and call it when done.

jQuery
$("#panel")
  .fadeIn(400)
  .queue(function (next) {
    $(this).text("Loaded!");
    next();
  })
  .fadeOut(400);
Try It Yourself

How It Works

  1. fadeIn. Standard effect auto-dequeues when done.
  2. queue. Callback receives next.
  3. Work. Update the text while the chain is paused.
  4. next(). Same role as .dequeue() — start fadeOut.

Example 4 — Dequeue a Named Queue

Pass the queue name to start and continue custom non-fx work.

jQuery
var $el = $("#worker");
$el.queue("tasks", function () {
  $("#log").append("task A\n");
  $el.dequeue("tasks");
});
$el.queue("tasks", function () {
  $("#log").append("task B\n");
  $el.dequeue("tasks");
});

$("#run").on("click", function () {
  $("#log").text("");
  $el.dequeue("tasks");
});
Try It Yourself

How It Works

  1. Enqueue. Two functions wait on "tasks".
  2. Start. First .dequeue("tasks") runs task A.
  3. Continue. A calls .dequeue("tasks") again for B.
  4. fx untouched. Animations on fx are separate.

Example 5 — Multi-Step Serial Log

Three queued steps each append a line, then dequeue to the next.

jQuery
$("#start").on("click", function () {
  var $log = $("#log").text("").clearQueue();

  $log.queue(function () {
    $log.append("Step 1\n");
    $(this).dequeue();
  });
  $log.queue(function () {
    $log.append("Step 2\n");
    $(this).dequeue();
  });
  $log.queue(function () {
    $log.append("Step 3\n");
    $(this).dequeue();
  });

  $log.dequeue();
});
Try It Yourself

How It Works

  1. Queue. Three functions are added to fx.
  2. Kickoff. Outer .dequeue() starts Step 1.
  3. Chain. Each step dequeues the next.
  4. Order. Lines always print 1 → 2 → 3.
Watch outs

Edge Cases & Pitfalls

CaseWhat happensFix
Forget .dequeue() / next()Later effects never runAlways continue custom queue steps
Wrong queue nameWrong pipeline advances (or none)Match the name used in .queue("name", …)
Empty queueSafe no-opFine to call; nothing runs
Want to drop steps, not run them.dequeue() executes the next oneUse .clearQueue() instead
Async work inside .queue()Dequeuing too early continues earlyCall next() / .dequeue() in the async callback
Compatibility

Browser Support

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

✓ Stable · jQuery 1.2+

jQuery .dequeue()

Supported across jQuery 1.x (1.2+), 2.x, and 3.x. Prefer a current jQuery 3.x build. Use it (or next()) to finish custom .queue() steps.

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
.dequeue() Universal

Bottom line: Safe for everyday queue control. Remember: animations auto-advance; custom queue callbacks need an explicit continue.

Analysis

Performance Notes

ApproachCostBest for
One .dequeue() in a chainCheapCustom mid-animation steps
Stalled queuesWasted waitingAlways continue custom steps
Deep custom pipelinesHarder to reason aboutKeep steps few; prefer next()

Dequeuing itself is inexpensive. The costly bug is a stalled queue that leaves animations hanging — finish every custom step with .dequeue() or next().

Remember

Key Takeaways

  • Role: run the next queued function — since jQuery 1.2.
  • Continue: $(this).dequeue() or next() after custom work.
  • Auto: .animate() / fades advance fx for you.
  • vs clear: dequeue runs next · .clearQueue() drops without running.

One line: .dequeue() advances a queue by running the next waiting function — required after custom .queue() steps.

Frequently Asked Questions

.dequeue() removes the next function from the specified queue and executes it immediately. It advances the queue by one step — unlike .clearQueue(), which drops all pending items without running them.
An optional string naming which queue to advance. It defaults to "fx" — jQuery’s standard effects queue. Pass a custom name like "tasks" to dequeue from queues created with .queue("tasks", fn).
When jQuery runs a function you added with .queue(), it pauses the pipeline until you signal completion. Calling $(this).dequeue() or next() tells jQuery to run the following step. Without that signal, the queue stalls and later animations never start.
They achieve the same goal. next() is the modern pattern: .queue(function(next) { … next(); }). .dequeue() is the classic style: .queue(function() { $(this).dequeue(); }). Both continue the queue.
Yes for standard effects. jQuery automatically dequeues after each .animate(), .fadeIn(), and similar fx step. You only need manual .dequeue() (or next()) inside custom functions added with .queue(fn).
A jQuery object — the same collection you called it on. You can chain further methods, though it is most often called inside a queued callback to resume the pipeline.

Next: .clearQueue() Method

Drop pending queue items without running them — the counterpart to .dequeue().

.clearQueue() tutorial →

About the author

Mari Selvan M P
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 .queue() Method jQuery .clearQueue() Remove Pending Queue Items