jQuery .stop() Method

What Is .stop()?

.stop([clearQueue] [, jumpToEnd]) stops the currently-running animation on matched elements (since 1.2). Since 1.7 you can also target a named queue: .stop([queue] [, clearQueue] [, jumpToEnd]).

$("#box").stop();              // freeze current tween
$("#box").stop(true);          // freeze + clear remaining queue
$("#box").stop(true, true);    // clear queue + jump to end CSS
$("#box").stop("fx", true, true); // same, named queue (1.7+)

// Hover-safe fade (official pattern)
$("#hover").hover(
  function () { $(this).find("img").stop(true, true).fadeOut(); },
  function () { $(this).find("img").stop(true, true).fadeIn(); }
);

How to Use .stop()

Pick the flags that match what should happen to the active tween and the rest of the fx queue.

1. Start an animation with .animate(), .fadeIn(), .slideUp(), etc.
2. Call .stop() on the same element when you need to interrupt it.
3. Set clearQueue if later queued steps should never run.
4. Set jumpToEnd if the element should jump to the current step’s target CSS.
5. On hover/click storms, prefer .stop(true, true) before starting a new effect.

Pseudocode

if animation is running on element:
    stop the current tween

    if jumpToEnd:
        set CSS to that tween's final values
        run that tween's complete callback
    else:
        leave CSS where it is
        do NOT run complete

    if clearQueue:
        discard remaining queued animations
    else:
        start the next queued animation now

Cheat Sheet

Quick facts while debugging animation queues.

Live Preview

Animate a box, then try different .stop() flag combinations.

Ready — pick an action and click Run.

jQuery Examples

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

$("#go").on("click", function () {
  $("#box").animate({ marginLeft: 160 }, 2000);
});

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

$("#back").on("click", function () {
  $("#box").animate({ marginLeft: 0 }, 2000);
});

Go → box slides right for 2s
STOP → freezes at current margin
Back → slides toward 0

$("#box")
  .animate({ marginLeft: 80 }, 800)
  .animate({ marginLeft: 160 }, 800)
  .animate({ marginLeft: 240 }, 800);

// Later — drop remaining steps, keep current freeze
$("#box").stop(true);

Without clearQueue → next step starts after stop
With .stop(true) → remaining steps never run

$("#box").animate({ opacity: 0.2 }, 2000, function () {
  $("#status").text("complete fired");
});

// Snap opacity to 0.2 and run complete
$("#box").stop(false, true);

opacity jumps to 0.2
status → "complete fired"

$("#hover-zone").hover(
  function () {
    $("#fade-target").stop(true, true).fadeOut(300);
  },
  function () {
    $("#fade-target").stop(true, true).fadeIn(300);
  }
);

Mouse in → fade out (no backlog)
Mouse out → fade in cleanly
Rapid moves stay stable

var $block = $("#panel");

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

Click → slide starts
Click again mid-way → reverses cleanly
Avoids half-open stuck panels

Performance Notes

Stopping is cheap. The expensive part is letting unused animations pile up — clear them early on busy interaction paths.

Key Takeaways