jQuery .clearQueue() Method

What You’ll Learn

The .clearQueue() instance method removes every function on a jQuery queue that has not yet run. This tutorial covers syntax, the default fx effects queue, comparisons with .stop() and .dequeue(), the official Start/Stop demo, named custom queues, rapid-click guards, and five hands-on examples.

Introduction

jQuery chains animations and callbacks on a per-element queue. When you call .show(), .animate(), or .queue(fn), steps land on the default fx effects queue and run one at a time. Leftover items can still fire if the user interrupts the chain.

.clearQueue(), added in jQuery 1.4, empties that waiting list — every function that has not started yet. It returns the same jQuery collection for chaining. On fx it behaves like .stop(true), but unlike .stop() it also clears non-animation functions added via .queue().

Understanding the .clearQueue() Method

.clearQueue( [queueName] ) is an instance method on jQuery collections. It accepts an optional String queue name (default "fx") and returns a jQuery object.

It does not undo effects in progress — only pending entries. Pair with .stop() to halt the current animation, as the official jQuery API demo does on Stop.

📝 Syntax

General form of .clearQueue:

jQuery( selector ).clearQueue( [queueName] )

Parameters

• queueName (optional String) — name of the queue to clear. Defaults to "fx", the standard effects queue.

Return value

• A jQuery object — the same collection, so you can chain further methods.

Official jQuery API description

// Remove all pending fx queue items
myDiv.clearQueue();

// Remove pending items from a custom queue
myDiv.clearQueue( "tasks" );

// Official Stop handler — clear waiting + halt current effect
myDiv.clearQueue();
myDiv.stop();

Examples Gallery

Each example demonstrates .clearQueue() on real animation chains. Open DevTools or use the Try-it links. Example 1 mirrors the official jQuery API Start/Stop demo.

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

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

Start: div animates through the full chain
Stop: pending animate/slideUp steps removed; current effect halted

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

$box.animate({ width: 200 }, 2000 );
$box.queue(function( next ) {
  console.log( "custom callback queued" );
  next();
});

// stop(true) clears fx animation steps but may leave custom queue fns
$box.stop( true );
console.log( "after stop(true):", $box.queue( "fx" ).length );

// clearQueue removes ALL pending fx items including custom fns
$box.clearQueue();
console.log( "after clearQueue:", $box.queue( "fx" ).length );

after stop(true): 0 or 1 (depends on timing)
after clearQueue: 0

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

$el.queue( "tasks", function( next ) {
  console.log( "task 1" );
  next();
});
$el.queue( "tasks", function( next ) {
  console.log( "task 2" );
  next();
});
$el.queue( "tasks", function( next ) {
  console.log( "task 3" );
  next();
});

console.log( "before:", $el.queue( "tasks" ).length );
$el.clearQueue( "tasks" );
console.log( "after:", $el.queue( "tasks" ).length );

before: 3
after: 0

$( "#toggle" ).on( "click", function() {
  var $panel = $( "#panel" );

  $panel.clearQueue().stop();
  $panel.animate({ height: "toggle" }, 300 );
});

Each click: queue cleared, current toggle stopped, fresh animate starts
No stacked height toggles from fast clicking

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

$el.fadeIn( 400 );
$el.animate({ opacity: 0.5 }, 800 );
$el.fadeOut( 400 );

var pending = $el.queue( "fx" );
console.log( "pending count:", pending.length );

$el.clearQueue();
console.log( "after clearQueue:", $el.queue( "fx" ).length );

pending count: 2 (fadeOut + possibly more depending on timing)
after clearQueue: 0

🚀 Common Use Cases

• Cancel animation chains — drop pending .animate() steps when the user navigates away.
• Stop buttons — pair .clearQueue() with .stop() like the official jQuery demo.
• Rapid interaction guards — clear fx before starting a fresh toggle or slide.
• Custom serial tasks — abort a named tasks queue without touching effects.
• Modal / overlay cleanup — prevent queued fade-outs from firing after manual close.
• Plugin teardown — empty element queues before removing DOM nodes or re-initing widgets.

📝 Notes

• Available since jQuery 1.4; returns the jQuery collection (chainable).
• Default queue name is "fx" — the standard effects queue.
• Similar to .stop(true) on fx, but also removes non-animation .queue() callbacks.
• Does not stop the currently running effect — use .stop() for that.
• Named queues ("tasks", etc.) are cleared independently of fx.
• Inspect pending work with .queue(name) before deciding to clear.

💡 Best Practices