jQuery .finish() Method

What You’ll Learn

The .finish() instance method stops the currently-running animation, removes all queued animations, and jumps every matched element to the final CSS values of each queued step. This tutorial covers syntax since jQuery 1.9, the default fx queue name, comparisons with .stop(true, true), .stop(true, false), .clearQueue(), and .clearQueue().finish(), and five hands-on examples from the official jQuery API plus side-by-side and chained-effect patterns.

Introduction

Chained jQuery effects — three .animate() calls, a .fadeToggle() sequence, or rapid user clicks — enqueue steps on the default fx queue. Sometimes you need to abort everything instantly and land on the final visual state, not freeze mid-tween or leave half the chain pending.

Available since jQuery 1.9, .finish() does exactly that. It stops the animation currently running, removes every queued animation, and sets CSS properties to the target values of the current step and every queued step. That last detail separates .finish() from .stop(true, true), which clears the queue and jumps the active animation but never applies the end CSS of animations still waiting in line.

Understanding the .finish() Method

Per the official jQuery API, .finish() stops the currently-running animation, removes all queued animations, and completes all animations for the matched elements. When called on an element, the active tween and every queued animation immediately stop; CSS properties jump to their target values for each step, and all queued functions are removed.

If the optional queue name argument is provided, only animations in that named queue are finished. Without it, jQuery targets the default fx effects queue — the same pipeline used by .show(), .animate(), .fadeToggle(), and other effect methods.

📝 Syntax

One overload of .finish:

// Optional queue name - since jQuery 1.9
jQuery( selector ).finish( [queue ] )

Parameters

• queue (String, default "fx") — the name of the queue whose animations should be stopped and completed. Pass a custom queue name when finishing non-default pipelines created with .queue("tasks", fn).

Return value

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

Official jQuery API description

// Click Go to chain three .animate() steps; click Finish to jump to final position:
$( "#go" ).on( "click", function() {
  $( ".box" )
    .clearQueue()
    .stop()
    .css({ left: 10, top: 10 })
    .animate({ top: vert }, 3000 )
    .animate({ left: horiz }, 3000 )
    .animate({ top: 10 }, 3000 );
} );
$( "#finish" ).on( "click", function() {
  $( ".box" ).finish();
} );

Examples Gallery

Each example demonstrates an official jQuery API .finish() pattern or a common real-world use case. Open DevTools or use the Try-it links. Example 1 mirrors the path demo on api.jquery.com/finish/.

var horiz = $( "#path" ).width() - 20,
    vert = $( "#path" ).height() - 20;
$( "#go" ).on( "click", function() {
  $( ".box" )
    .clearQueue()
    .stop()
    .css({ left: 10, top: 10 })
    .animate({ top: vert }, 3000 )
    .animate({ left: horiz }, 3000 )
    .animate({ top: 10 }, 3000 );
} );
$( "#finish" ).on( "click", function() {
  $( ".box" ).finish();
} );

Go starts a 3-step path animation; Finish calls .finish() - box jumps to final top:10 left position with all queued animate end values applied

function startPath( selector ) {
  $( selector )
    .clearQueue().stop()
    .css({ left: 10, top: 10 })
    .animate({ top: 200 }, 3000 )
    .animate({ left: 300 }, 3000 )
    .animate({ top: 10 }, 3000 );
}
$( "#go-both" ).on( "click", function() {
  startPath( "#box-finish" );
  startPath( "#box-stop" );
} );
$( "#btn-finish" ).on( "click", function() {
  $( "#box-finish" ).finish();
} );
$( "#btn-stop" ).on( "click", function() {
  $( "#box-stop" ).stop( true, true );
} );

Mid-chain: .finish() box lands at final top:10 left:300; .stop(true,true) box lands at current step end only - often top:200, left:10 if interrupted during first animate

$( "#start-chain" ).on( "click", function() {
  $( "#chain-box" )
    .clearQueue().stop()
    .css({ left: 0, top: 0, width: 50 })
    .animate({ left: 250 }, 2000 )
    .animate({ top: 120 }, 2000 )
    .animate({ width: 150 }, 2000 );
} );
$( "#finish-chain" ).on( "click", function() {
  $( "#chain-box" ).finish();
} );

.finish() mid-chain sets left:250, top:120, width:150 simultaneously - all queued end values applied at once

$( "#run-mix" ).on( "click", function() {
  var $box = $( "#mix-box" ).clearQueue().stop().css({ opacity: 1 });
  $box
    .animate({ opacity: 0.3 }, 2000 )
    .queue( function( next ) {
      $( this ).css( "background", "orange" );
      next();
    } )
    .animate({ opacity: 1 }, 2000 );
} );
$( "#finish-alone" ).on( "click", function() {
  $( "#mix-box" ).finish();
} );
$( "#clear-finish" ).on( "click", function() {
  $( "#mix-box" ).clearQueue().finish();
} );

.finish() completes all queued steps including custom .queue() callbacks; .clearQueue().finish() removes pending queue fns first then finishes the active animation

$( "#spam-toggle" ).on( "click", function() {
  $( "#fade-panel" ).fadeToggle( 600 );
} );
$( "#finish-fx" ).on( "click", function() {
  $( "#fade-panel" ).finish( "fx" );
} );

After rapid fadeToggle clicks, .finish("fx") resolves all queued fades to final visibility/opacity - panel ends fully visible or hidden with no pending steps

🚀 Common Use Cases

• Skip intro animations — let users click “Skip” to .finish() a chained entrance sequence and land on the final layout immediately.
• Cancel in-flight transitions — close a modal or navigate away while a multi-step .animate() path is running; finish applies the end CSS cleanly.
• Resolve rapid-click queues — after stacked .fadeToggle() or .slideToggle() calls, .finish("fx") settles visibility without flicker.
• Reset before new animation — call .finish() before starting a fresh effect chain so no stale queued steps interfere.
• Testing and demos — jump long demo animations to their conclusion without waiting for every tween to play out.
• Accessibility preferences — pair with jQuery.fx.off or user motion settings to honor reduced-motion by finishing or disabling effects.

📝 Notes

• Available since jQuery 1.9; returns a chainable jQuery object.
• Default queue name is fx when the optional argument is omitted.
• Similar to .stop(true, true) but also applies end CSS for every queued animation — not just the current one.
• .stop(true, false) clears the queue but freezes the current animation at in-progress values; .finish() always completes to target CSS.
• .clearQueue() alone removes pending items without stopping the active animation or applying end states.
• .clearQueue().finish() drops pending queue functions first, then finishes the currently-running step.
• Set jQuery.fx.off = true globally to disable all effects; animation methods then immediately set elements to their final state when called.

💡 Best Practices