jQuery - Stop Animations in jQuery

What is .stop() in jQuery?

  • .stop() is used to halt ongoing animations on selected elements immediately.

  • By default, when you call multiple animation methods (like .slideDown(), .fadeOut(), etc.), they get added to a queue and run one after another.

  • .stop() interrupts the current animation (and optionally clears the queue).

Syntax

$(selector).stop(clearQueue, jumpToEnd);

  • clearQueue (true or false):

    • true → clears any queued animations waiting to run.

    • false (default) → keeps queued animations.

  • jumpToEnd (true or false):

    • true → jumps the element to its final state of the animation.

    • false (default) → stops where it is.

Example 1: Basic Stop

$("#box").slideDown(5000);

// If user clicks the button, animation will stop
$("#stopBtn").click(function() {
  $("#box").stop();
});

Here, if #box is sliding down for 5 seconds, clicking the stop button will pause it immediately.

Example 2: Stop and Jump to End

$("#box").slideUp(5000);

// Jump directly to the end state (fully hidden)
$("#stopBtn").click(function() {
  $("#box").stop(true, true);
});

Example 3: Multiple Animations in Queue

$("#box").slideUp(2000).slideDown(2000).fadeOut(2000);

// Stop queued animations
$("#stopBtn").click(function() {
  $("#box").stop(true); // clears queue, stops everything
});

Quick Summary

  • .stop() → stops current animation only.

  • .stop(true) → stops current + clears queued animations.

  • .stop(true, true) → stops current, clears queue, and jumps to final state.