jQuery .stop() Method

What You’ll Learn

The .stop() instance method stops the currently-running animation on matched elements. This tutorial covers both overloads since jQuery 1.2 and 1.7 (including the optional queue name), clearQueue and jumpToEnd defaults, comparisons with .stop(true, false), .stop(true, true), .finish(), and .clearQueue(), the hover-fade guard pattern, and five hands-on examples from the official jQuery API.

Introduction

Chained .animate(), .fadeIn(), and .slideToggle() calls enqueue on jQuery’s fx queue. When a user clicks rapidly or moves the mouse in and out, animations stack — elements flicker, overshoot, or finish in the wrong state.

Available since jQuery 1.2, .stop() halts the animation currently running on matched elements. With default arguments the element freezes at its in-progress CSS and the next queued animation starts immediately. Pass true for clearQueue to discard pending steps, or add a second true for jumpToEnd to snap the active tween to its target values and fire its callback.

Understanding the .stop() Method

Per the official jQuery API, .stop() stops the currently-running animation on the matched elements. When called with no arguments, the element remains at its current in-progress CSS values — not the animation’s end state. The completion callback for the halted step does not run unless jumpToEnd is true.

Since jQuery 1.7, the first argument can be a queue name string (default "fx") instead of a boolean. Toggled effects such as .slideToggle() and .fadeToggle() may leave an element mid-animation; calling .stop() before starting a new toggle prevents conflicting queued tweens from running afterward.

📝 Syntax

Two overloads of .stop:

// 1) clearQueue and jumpToEnd — since jQuery 1.2
jQuery( selector ).stop( [clearQueue ] [, jumpToEnd ] )
// 2) Queue name, clearQueue, jumpToEnd — since jQuery 1.7
jQuery( selector ).stop( [queue ] [, clearQueue ] [, jumpToEnd ] )

Parameters

• queue (String, default "fx", since 1.7) — name of the queue whose animations to stop.
• clearQueue (Boolean, default false) — when true, removes the rest of the animations queued on the specified queue.
• jumpToEnd (Boolean, default false) — when true, the current animation jumps immediately to its end state and its completion callback is invoked.

Return value

• A jQuery object for chaining further methods on the same set.

Official jQuery API description

// Stop the currently-running animation:
$( "#stop" ).on( "click", function() {
  $( ".block" ).stop();
});

Examples Gallery

Each example demonstrates an official jQuery API .stop() pattern or a common real-world guard. Open DevTools or use the Try-it links. Examples 1 and 2 mirror live demos on api.jquery.com/stop/.

$( "#go" ).on( "click", function() {
  $( ".block" ).animate({ left: "+=100px" }, 2000 );
} );
$( "#stop" ).on( "click", function() {
  $( ".block" ).stop();
} );
$( "#back" ).on( "click", function() {
  $( ".block" ).animate({ left: "-=100px" }, 2000 );
} );

Go slides .block right; STOP halts mid-animation at current left value; Back animates left from that frozen position

$( "#toggle" ).on( "click", function() {
  var $block = $( ".block" );
  $block.stop().slideToggle( 1000 );
} );

Rapid clicks: each toggle stops the in-progress slide first, then starts a fresh 1000ms slideToggle from the current height

$( "img" )
  .on( "mouseenter", function() {
    $( this ).stop( true, true ).fadeIn( "slow" );
  } )
  .on( "mouseleave", function() {
    $( this ).stop( true, true ).fadeOut( "slow" );
  } );

Fast mouse in/out: no flicker or opacity queue backlog; each enter/leave starts a clean slow fade from a resolved end state

$( "#go-chain" ).on( "click", function() {
  $( ".block" )
    .animate({ left: "+=150px" }, 3000 )
    .animate({ top: "+=80px" }, 3000 )
    .animate({ width: "+=40px" }, 3000 );
} );
$( "#stop-chain" ).on( "click", function() {
  $( ".block" ).stop( true );
} );

Mid-first-animate Stop: block freezes at current left; queued top and width tweens are removed and never run

$( "#go-jump" ).on( "click", function() {
  $( ".block" )
    .animate({ left: "+=200px" }, 4000, function() {
      $( "#msg" ).text( "First animate complete." );
    } )
    .animate({ top: "+=60px" }, 2000 );
} );
$( "#jump-end" ).on( "click", function() {
  $( ".block" ).stop( false, true );
} );

Jump End mid-first-animate: block snaps to final left offset, callback sets #msg, then queued top animate starts automatically

🚀 Common Use Cases

• Rapid toggle buttons — call .stop() before .slideToggle() or .fadeToggle() so mid-animation clicks do not stack conflicting tweens.
• Hover image fades — guard mouseenter/mouseleave with .stop(true, true) before .fadeIn() / .fadeOut().
• Cancel user-initiated motion — pair Go and Stop buttons on draggable or sliding UI, as in the official API demo.
• Abort chained animate paths — .stop(true) drops pending path segments when the user interrupts a multi-step animation.
• Skip to current step end — .stop(false, true) when you need the active tween’s callback without waiting for the full duration.
• Named queue control since 1.7 — pass a queue string as the first argument to stop animations on custom queues only.

📝 Notes

• Available since jQuery 1.2; queue name overload added in 1.7; works alongside toggled effects such as .slideToggle() and .fadeToggle().
• clearQueue defaults to false; jumpToEnd defaults to false.
• Stops mid-animation at current CSS unless jumpToEnd is true — the element does not snap to the target end state by default.
• Completion callbacks are not invoked when stopped unless jumpToEnd is true.
• When clearQueue is false, the next queued animation starts after the halt. When true, pending steps are removed.
• Since jQuery 1.7, pass a queue name string as the first argument: .stop("fx", true, true) or .stop("customQueue", true).
• For toggled animations, call .stop() before starting a new toggle so half-finished show/hide tweens do not conflict in the queue.

💡 Best Practices