jQuery .clearQueue() Remove Pending Queue Items

Beginner

7 min read

Updated: Oct 2026

5 examples

Live preview

jQuery .clearQueue() method — remove pending items from the fx or a named queue

Definition

What Is `.clearQueue()`?

.clearQueue() (since jQuery 1.4) removes every function on a queue that has not yet run. Without an argument it clears "fx", the standard effects queue. Returns the jQuery object for chaining.

Remember

$el.clearQueue();              // clear pending fx items
$el.clearQueue("tasks");       // clear a named queue
$el.clearQueue().stop();       // drop waiting + halt current effect

// Waiting list emptied · current effect still runs unless .stop()

Need	Use
Drop pending fx / custom callbacks	`$el.clearQueue()`
Halt current animation	`.stop()`
Clear queue + jump to end	`.stop(true, true)`
Finish all queued animations now	`.finish()`
Add / inspect queue functions	`.queue()`

Approach

How to Use `.clearQueue()`

Select the element, clear the queue you care about, and call .stop() if the current effect should stop too.

Select the animated element ($("#box")).
Call .clearQueue() (or .clearQueue("name") for a custom queue).
Optionally call .stop() to halt the effect already in progress.
Start a fresh animation only after the waiting list is empty.

Piece	Required?	Role
Matched set	Yes	Elements whose queue you clear
`queueName`	No	Defaults to `"fx"`; pass a custom name when needed
Return value	—	jQuery object (chainable)

Pseudocode

call $(elements).clearQueue(queueName?)

name = queueName or "fx"

for each matched element:
    remove every function on queue "name"
      that has not started yet
    leave the currently running function alone

return the jQuery set for chaining

// Cancel mid-chain (official pattern):
//   $el.clearQueue()
//   $el.stop()

Reference

Cheat Sheet

Keep these facts handy while managing animation queues.

Topic	Detail
Syntax	`.clearQueue( [queueName] )`
Since	jQuery 1.4
Default queue	`"fx"` (effects)
Removes	Pending functions only
Does not	Stop the current animation
Cancel mid-chain	`$el.clearQueue().stop()`
Named queue	`$el.clearQueue("tasks")`
Inspect length	`$el.queue("fx").length`
Rapid clicks	`$el.clearQueue().stop().animate(…)`

Try it

Live Preview

Start a short animation chain, then Stop to clearQueue + stop. Watch the pending count.

Start queues fade + width + fadeOut. Stop clears pending items and halts the current effect.

Result

Ready — start a chain, then stop mid-way.

Code

jQuery Examples

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

Example 1 — Official Start/Stop Demo

From the jQuery docs: build a long chain, then clear pending steps and stop the current effect.

jQuery

$("#start").on("click", function () {
  var myDiv = $("div.box");
  myDiv.show("slow");
  myDiv.animate({ left: "+=200" }, 5000);
  myDiv.queue(function () {
    $(this).addClass("newcolor").dequeue();
  });
  myDiv.animate({ left: "-=200" }, 1500);
  myDiv.queue(function () {
    $(this).removeClass("newcolor").dequeue();
  });
  myDiv.slideUp();
});

$("#stop").on("click", function () {
  var myDiv = $("div.box");
  myDiv.clearQueue();
  myDiv.stop();
});

Try It Yourself

How It Works

Start. Several effects and .queue() callbacks are chained onto fx.
Waiting. Only one step runs at a time; the rest sit pending.
clearQueue. Removes every function that has not started.
stop. Halts the effect that was already playing.

Example 2 — `.clearQueue()` vs `.stop(true)`

Both can empty pending fx items. Check queue length right after each call.

jQuery

function setupBox() {
  var $box = $("#box").css({ width: 40 });
  $box.stop(true, true).clearQueue();
  $box.animate({ width: 200 }, 2000);
  $box.queue(function (next) {
    $("#log").append("custom callback queued\n");
    next();
  });
  return $box;
}

$("#run-stop").on("click", function () {
  var $box = setupBox();
  $box.stop(true);
  $("#log").text("after stop(true): " + $box.queue("fx").length);
});

$("#run-clear").on("click", function () {
  var $box = setupBox();
  $box.clearQueue();
  $("#log").text("after clearQueue: " + $box.queue("fx").length);
});

Try It Yourself

How It Works

Setup. One animate plus a custom queued callback.
stop(true). Clears the fx queue (animation-oriented).
clearQueue. Also clears pending fx items — and works on named queues.
Length. .queue("fx").length shows what is still waiting.

Example 3 — Clear a Named Custom Queue

Pass a queue name to clear non-fx work built with .queue("tasks", fn).

jQuery

var $el = $("#worker");
$el.queue("tasks", function (next) { next(); });
$el.queue("tasks", function (next) { next(); });
$el.queue("tasks", function (next) { next(); });

$("#clear").on("click", function () {
  var before = $el.queue("tasks").length;
  $el.clearQueue("tasks");
  var after = $el.queue("tasks").length;
  $("#log").text("before: " + before + "\nafter: " + after);
});

Try It Yourself

How It Works

Name. Functions are stored on the "tasks" queue, not fx.
Clear. .clearQueue("tasks") removes only that queue’s pending items.
fx untouched. Animations on fx are not affected.
Count. Length drops from 3 to 0.

Example 4 — Rapid-Click Guard

Clear pending work and stop the current effect before starting a new toggle.

jQuery

$("#toggle").on("click", function () {
  var $panel = $("#panel");
  $panel.clearQueue().stop();
  $panel.animate({ height: "toggle" }, 300);
});

Try It Yourself

How It Works

Clear. Drops any waiting height animations.
Stop. Ends the toggle that was already running.
Fresh. The new .animate() starts alone.
Result. Spam clicks no longer build a long fx queue.

Example 5 — Inspect Queue Length

Queue several effects, read .queue("fx").length, then clear and read again.

jQuery

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

$("#queue").on("click", function () {
  $el.stop(true, true).clearQueue();
  $el.fadeIn(400);
  $el.animate({ opacity: 0.5 }, 800);
  $el.fadeOut(400);
  $("#log").text("pending count: " + $el.queue("fx").length);
});

$("#clear").on("click", function () {
  $el.clearQueue();
  $("#log").text("after clearQueue: " + $el.queue("fx").length);
});

Try It Yourself

How It Works

Queue. Three effects are chained onto fx.
Length. Shows how many functions are still waiting.
Clear. Removes pending items (not the one in flight).
After. Pending count drops to 0.

Watch outs

Edge Cases & Pitfalls

Case	What happens	Fix
Only `.clearQueue()`	Current effect keeps playing	Also call `.stop()` when canceling
Wrong queue name	Named queue untouched; `fx` may still grow	Match the name used in `.queue("name", …)`
Expect jump-to-end	Clearing does not finish styles	Use `.stop(true, true)` or `.finish()`
Empty queue	Safe no-op	Still fine to call before a new animation
Custom callback already running	That callback is not removed	Clear before it starts, or design it to exit early

Compatibility

Browser Support

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

✓ Stable · jQuery 1.4+

jQuery .clearQueue()

Supported across jQuery 1.x (1.4+), 2.x, and 3.x. Prefer a current jQuery 3.x build. Pair with .stop() when canceling live animations.

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

.clearQueue() Universal

Bottom line: Safe for everyday queue control. Clear pending work, stop the current effect when needed, and use named queues for non-animation tasks.

Analysis

Performance Notes

Approach	Cost	Best for
`.clearQueue()` on click	Cheap	Cancel buttons, rapid toggles
Long stacked fx queues	Wasted frames	Clear (or stop) before each new effect
Many elements × deep queues	More bookkeeping	Animate fewer elements; clear early

Clearing a queue is inexpensive. The real cost is letting spam clicks build long animation chains — clear (and stop) early so the browser is not painting outdated steps.

Remember

Key Takeaways

Role: remove pending queue functions — since jQuery 1.4.
Default: clears "fx"; pass a name for custom queues.
Cancel: .clearQueue().stop() — drop waiting + halt current.
Scope: works on .queue() callbacks — not only animations.

One line: .clearQueue() empties waiting queue items — pair with .stop() to cancel a live chain.

Frequently Asked Questions

What does jQuery .clearQueue() do?

.clearQueue() removes every function on the named queue that has not yet run. It empties the waiting list so chained effects and queued callbacks never start. It does not undo an animation that is already in progress.

What is the queueName parameter?

An optional string naming which queue to clear. It defaults to "fx" — jQuery’s standard effects queue used by .animate(), .fadeIn(), .slideUp(), and similar methods. Pass a custom name like "tasks" to clear queues built with .queue("tasks", fn).

How is .clearQueue() different from .stop(true)?

For the fx queue, both remove pending items. .stop(true) is animation-focused and can also jump the current effect to its end when combined with jumpToEnd. .clearQueue() is queue-generic — it removes any pending function added via .queue(), not only animation steps.

Does .clearQueue() stop the currently running animation?

No. Only functions that have not started are removed. The effect currently executing continues until it finishes or you call .stop(). The official jQuery demo calls both .clearQueue() and .stop() on Stop for that reason.

Can .clearQueue() remove custom .queue() callbacks?

Yes. That is a key difference from .stop(). When you queue a non-animation callback with .queue(fn), .clearQueue() removes pending ones. .stop() is meant for animations, not arbitrary queued work.

Should I call .clearQueue() and .stop() together?

Often yes when canceling mid-animation: .clearQueue() drops everything waiting; .stop() halts the effect currently playing. For a rapid-click guard before a new animation, .clearQueue().stop() (or .stop(true)) is a common pattern.

Next: jQuery Effects Methods

Browse the full effects toolkit — animate, fade, slide, queue, and more.

Effects overview →

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 .dequeue() Method jQuery Effects Methods

jQuery .clearQueue() Remove Pending Queue Items

What Is .clearQueue()?

How to Use .clearQueue()

Pseudocode

Cheat Sheet

Live Preview

jQuery Examples

Example 1 — Official Start/Stop Demo

How It Works

Example 2 — .clearQueue() vs .stop(true)

How It Works

Example 3 — Clear a Named Custom Queue

How It Works

Example 4 — Rapid-Click Guard

How It Works

Example 5 — Inspect Queue Length

How It Works

Edge Cases & Pitfalls

Browser Support

jQuery .clearQueue()

Performance Notes

Key Takeaways

Frequently Asked Questions

Related Topics

.queue()

.dequeue()

.stop()

.finish()

.animate()

.delay()

Next: jQuery Effects Methods

About the author

What Is `.clearQueue()`?

How to Use `.clearQueue()`

Example 2 — `.clearQueue()` vs `.stop(true)`