jQuery .finish() Method

Beginner

7 min read

Updated: Oct 2026

5 examples

Live preview

jQuery .finish() method — stop animations and jump queued steps to their end CSS values

Definition

What Is `.finish()`?

.finish() (since jQuery 1.9) stops the currently-running animation, removes all queued animations, and sets CSS to the end values of every step — current and queued. Returns the jQuery object for chaining.

Remember

$el.finish();           // default queue: "fx"
$el.finish("fx");       // same, explicit
$el.finish("tasks");    // named queue only

// Like .stop(true, true) — PLUS end CSS for queued steps
// Queue is empty afterward

Need	Use
Skip to end of whole chain	`$el.finish()`
Jump current only + clear queue	`.stop(true, true)`
Drop pending items only	`.clearQueue()`
Inspect / add queue steps	`.queue()`
Disable all effects	`jQuery.fx.off`

Approach

How to Use `.finish()`

Start a chained effect, then call .finish() when you want the final CSS now — not mid-tween.

Queue one or more effects (.animate(), .fadeToggle(), …).
Call $el.finish() (optional queue name; default "fx").
The active tween stops and jumps to its end CSS.
Every queued step also jumps to its end CSS, then the queue is cleared.
Continue with new effects if needed — the pipeline is empty.

Piece	Required?	Role
Matched set	Yes	Elements whose animations should finish
`queue`	No	Queue name; default `"fx"`
Return value	—	jQuery object (chainable)

Pseudocode

call $(elements).finish(queueName?)
queueName = queueName or "fx"

for each matched element:
    stop the animation currently running on that queue
    set its CSS to that step's end values

    for each remaining queued animation on that queue:
        set CSS to that step's end values
        remove the step from the queue

    queue is now empty

return the jQuery set for chaining

Reference

Cheat Sheet

Keep these facts handy when interrupting animation chains.

Topic	Detail
Syntax	`.finish([queue])`
Since	jQuery 1.9
Default queue	`"fx"`
vs `stop(true, true)`	Also applies end CSS for queued steps
vs `clearQueue()`	clearQueue drops pending only; does not finish CSS
Skip UI	Ideal for “Skip animation” buttons
Related	`.stop()` · `.clearQueue()` · `.queue()`

Try it

Live Preview

Start a three-step chain, then choose finish() or stop(true, true) mid-run.

Chain: margin → opacity → font size. finish() applies all three end values; stop(true,true) only the current step.

Result

Ready — click Go, then finish or stop mid-run.

Code

jQuery Examples

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

Example 1 — Go Then `.finish()`

Official pattern: chain three .animate() steps, then jump to the combined end state.

jQuery

$("#go").on("click", function () {
  $("#box")
    .clearQueue()
    .stop()
    .css({ marginLeft: 0, opacity: 1, fontSize: 16 })
    .animate({ marginLeft: 120 }, 2000)
    .animate({ opacity: 0.3 }, 2000)
    .animate({ fontSize: 28 }, 2000);
});

$("#finish").on("click", function () {
  $("#box").finish();
});

Try It Yourself

How It Works

Reset. clearQueue().stop() clears any prior run.
Chain. Three .animate() calls enqueue on fx.
Finish. Active + queued steps jump to their end CSS.
Done. The box looks as if the full chain completed.

Example 2 — `.finish()` vs `.stop(true, true)`

Same chain on two boxes — see which end CSS each method keeps.

jQuery

function start($el) {
  $el.clearQueue().stop()
    .css({ marginLeft: 0, fontSize: 16 })
    .animate({ marginLeft: 160 }, 2000)
    .animate({ fontSize: 28 }, 2000);
}

$("#go-both").on("click", function () {
  start($("#boxA"));
  start($("#boxB"));
});

$("#btn-finish").on("click", function () {
  $("#boxA").finish();
});

$("#btn-stop").on("click", function () {
  $("#boxB").stop(true, true);
});

Try It Yourself

How It Works

Same start. Both boxes run the identical two-step chain.
finish. Applies end CSS for step 1 and step 2.
stop(true,true). Jumps only the current step; drops the rest.
Rule. Need every queued target? Use .finish().

Example 3 — Multi-Property Chain

Animate margin, then opacity, then font size — finish collapses all three.

jQuery

$("#start").on("click", function () {
  $("#chain")
    .clearQueue().stop()
    .css({ marginLeft: 0, opacity: 1, fontSize: 16 })
    .animate({ marginLeft: 100 }, 1500)
    .animate({ opacity: 0.4 }, 1500)
    .animate({ fontSize: 24 }, 1500);
});

$("#finish-chain").on("click", function () {
  $("#chain").finish();
});

Try It Yourself

How It Works

Queue. fx runs one animate at a time.
Wait. Without finish, the full chain takes ~4.5 s.
Collapse. .finish() applies every step’s end CSS now.
Clear. Nothing remains queued afterward.

Example 4 — `.clearQueue().finish()`

Drop pending queue work first, then finish only the animation that is already running.

jQuery

$("#run").on("click", function () {
  var $box = $("#mix").clearQueue().stop().css({ opacity: 1 });
  $box
    .animate({ opacity: 0.3 }, 2000)
    .queue(function (next) {
      $(this).text("queue callback ran");
      next();
    })
    .animate({ opacity: 1 }, 2000);
});

$("#finish-alone").on("click", function () {
  $("#mix").finish();
});

$("#clear-finish").on("click", function () {
  $("#mix").clearQueue().finish();
});

Try It Yourself

How It Works

Mix. Animations and a custom .queue(fn) share fx.
finish alone. Processes remaining entries to completion.
clear then finish. Pending items are removed first.
Choose. Keep or discard pending custom work intentionally.

Example 5 — `.finish("fx")` After `fadeToggle`

Spam toggles enqueue fades; finish settles the panel to a final visible/hidden state.

jQuery

$("#spam").on("click", function () {
  $("#panel").fadeToggle(600);
});

$("#finish-fx").on("click", function () {
  $("#panel").finish("fx");
});

Try It Yourself

How It Works

Spam. Each click queues another fadeToggle.
Explicit queue. "fx" is the default; naming it is clear for teaching.
Resolve. Every queued fade jumps to its end opacity/display.
Clean. The queue is empty for the next intentional animation.

Edge Cases & Pitfalls

Watch these when interrupting multi-step animations.

vs stop

`stop(true, true)` drops queued end CSS

If later steps must still apply, use .finish() — not .stop(true, true).

instant

Finish jumps — it does not ease

Properties snap to end values. There is no smooth “finish animation.”

queue fn

Custom `.queue(fn)` entries are processed

Use .clearQueue().finish() when pending callbacks should be discarded.

named

Wrong queue name does nothing useful

Effects live on "fx" by default. Finishing "tasks" won’t touch standard fades.

fx.off

`jQuery.fx.off` skips tweens globally

When true, animation methods set final state immediately. Pair with reduced-motion prefs.

Compatibility

Browser Support

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

✓ Stable · jQuery 1.9+

jQuery .finish()

Supported across jQuery 1.9+, 2.x, and 3.x. Prefer a current jQuery 3.x build. Behavior comes from jQuery’s fx queue, not CSS transitions.

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

.finish() Universal

Bottom line: Safe for skip controls and cancel paths. Prefer .finish() when every queued step’s end CSS must apply; use .stop(true, true) when only the current step matters.

Analysis

Performance Notes

Approach	Cost	Best for
`.finish()` on one element	Cheap	Skip / cancel buttons
Long chains (many steps)	Still cheap vs waiting	Jumping to the end saves time
Spam without finish/stop	Wasted frames	Finish or stop before restarting

Finishing is cheaper than letting a long queue play out. Call it when the user cancels, skips, or navigates away mid-chain — then start fresh effects on an empty queue.

Remember

Key Takeaways

Role: stop current + clear queue + apply end CSS for every step (since 1.9).
Call: $el.finish() — optional queue name; default "fx".
vs stop: .finish() also completes queued steps’ end CSS.
Use for: skip controls, cancel mid-chain, settle spam-clicked effects.

One line: .finish() fast-forwards the entire fx playlist to its final frames — current and queued.

Frequently Asked Questions

What does jQuery .finish() do?

.finish() stops the currently-running animation, removes all queued animations, and jumps CSS properties to the end values of the current step and every queued step. It returns a jQuery object for chaining.

How is .finish() different from .stop(true, true)?

Both clear the queue and jump the current animation to its end value. .finish() also applies the end CSS of every queued animation before removing those steps. .stop(true, true) discards queued steps without applying their target CSS.

What is the optional queue name?

.finish([queue]) accepts an optional string. The default is "fx" — jQuery’s effects queue used by .animate(), .fadeToggle(), and similar methods. Pass a custom name to finish only that named queue.

Since which jQuery version is .finish() available?

.finish() was added in jQuery 1.9. Use it on the same fx pipeline as .stop(), .clearQueue(), and .queue().

Does .finish() run custom .queue() callbacks?

Yes. Entries still on the fx queue — including custom .queue(fn) callbacks — are processed so each step reaches completion. Use .clearQueue().finish() if you want to drop pending queue items first, then finish only the active animation.

How does jQuery.fx.off relate to .finish()?

Setting jQuery.fx.off = true disables all effects globally. Animation methods then jump elements to their final state when called, instead of displaying a tween. See jQuery.fx.off for details.

Next: jQuery.fx.interval

Control how often jQuery ticks the fx animation timer.

jQuery.fx.interval tutorial →

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 .stop() Method jQuery jQuery.fx.interval Property

jQuery .finish() Method

What Is .finish()?

How to Use .finish()

Pseudocode

Cheat Sheet

Live Preview

jQuery Examples

Example 1 — Go Then .finish()

How It Works

Example 2 — .finish() vs .stop(true, true)

How It Works

Example 3 — Multi-Property Chain

How It Works

Example 4 — .clearQueue().finish()

How It Works

Example 5 — .finish("fx") After fadeToggle

How It Works

Edge Cases & Pitfalls

stop(true, true) drops queued end CSS

Finish jumps — it does not ease

Custom .queue(fn) entries are processed

Wrong queue name does nothing useful

jQuery.fx.off skips tweens globally

Browser Support

jQuery .finish()

Performance Notes

Key Takeaways

Frequently Asked Questions

Related Topics

.stop()

.clearQueue()

.queue()

.delay()

.fadeToggle()

jQuery.fx.off

Next: jQuery.fx.interval

About the author

What Is `.finish()`?

How to Use `.finish()`

Example 1 — Go Then `.finish()`

Example 2 — `.finish()` vs `.stop(true, true)`

Example 4 — `.clearQueue().finish()`

Example 5 — `.finish("fx")` After `fadeToggle`

`stop(true, true)` drops queued end CSS

Custom `.queue(fn)` entries are processed

`jQuery.fx.off` skips tweens globally