jQuery Stop

jQuery Stop Animations

The jQuery stop() method is used to halt an animation before it finishes.

This is especially useful if a user interaction needs to interrupt a long effect.

It works for all jQuery effect functions, including sliding, fading, and custom animations.

The stop() Method Syntax

The standard syntax is: $(selector).stop(stopAll, goToEnd);

The optional stopAll parameter determines whether the animation queue should be cleared.

The optional goToEnd parameter determines whether to jump immediately to the end state.

By default, both parameters are set to false.

Using Default stop()

Calling stop() with no parameters simply pauses the current active animation.

If there are other animations queued up behind it, they will begin immediately.

$("#flip").click(function(){
  $("#panel").slideDown(5000);
});

$("#stop").click(function(){
  $("#panel").stop();
});

Using stop(true, true)

If you provide stop(true, true), it completely clears the animation queue.

Additionally, it instantly forces the element to its final animated size and position.

This prevents awkward intermediate states if a user clicks rapidly.