jQuery .dequeue() Method

What Is jQuery.dequeue()?

jQuery.dequeue(element [, queueName]) (alias $.dequeue) removes the next function from an element’s queue and runs it (added in jQuery 1.3). Default queue name is "fx".

$.dequeue(element [, queueName])  → undefined

// Inside a custom .queue() step:
.queue(function () {
  $(this).toggleClass("done");
  $.dequeue(this);          // continue the fx queue
})

// Everyday alternative:
$(this).dequeue()
// or modern:
.queue(function (next) { …; next(); })

How to Use jQuery.dequeue()

Advance a paused queue after your custom step finishes.

1. Build a chain with .animate() / .fadeOut() and a custom .queue() step.
2. Inside that step, do your work (toggleClass, change text, etc.).
3. Call $.dequeue(this) (or $(this).dequeue() / next()) to continue.
4. For a named queue, pass the same name: $.dequeue(el, "tasks").

Pseudocode

function dequeue(element, queueName = "fx"):
    fn = remove next function from element.queues[queueName]
    if fn exists:
        run fn with element as this
        // fn should eventually call dequeue again (or next())

// Typical animation chain:
animate A
queue step:
    do custom work
    $.dequeue(this)     // unlock remaining steps
animate B

Cheat Sheet

Keep these facts handy while continuing jQuery queues.

Live Preview

Run a short fadeOut → custom step → $.dequeue → fadeIn chain.

Pick a mode and click Run chain.

jQuery Examples

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

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

Box fades out → text becomes "Mid step" → fades back in

// Stalls — fadeIn never runs:
$("#a").fadeOut(300).queue(function () {
  $(this).text("stuck");
  // forgot $.dequeue(this);
}).fadeIn(300);

// Fixed:
$("#b").fadeOut(300).queue(function () {
  $(this).text("ok");
  $.dequeue(this);
}).fadeIn(300);

#a stays hidden
#b fades out, updates text, fades in

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

$.queue(el, "tasks", function (next) {
  $(el).text("Step 1");
  setTimeout(next, 400);
});
$.queue(el, "tasks", function () {
  $(el).text("Step 2");
  $.dequeue(el, "tasks");
});

$.dequeue(el, "tasks");  // start the named queue

Step 1
Step 2

// 1) Static utility
.queue(function () {
  $.dequeue(this);
})

// 2) Instance method (preferred day to day)
.queue(function () {
  $(this).dequeue();
})

// 3) Modern next callback
.queue(function (next) {
  next();
})

All three continue the chain the same way

Performance Notes

Dequeue itself is cheap. Cost comes from animations and timers you schedule inside each step — keep queues short and always finish them.

Key Takeaways