1. jQuery stop() Method Overview
The jQuery stop() method lets you interrupt running animations or effects on selected elements. Use it to prevent queued animations from stacking up and to create responsive, fluid UI interactions.
1.1. Syntax
The basic syntax of stop() method is as follows:
- clearQueue (default: false) – when true, removes all queued animations.
- jumpToEnd (default: false) – when true, finishes the current animation immediately.
$(selector).stop(clearQueue, jumpToEnd);
The stop() method only halts animations, it does not reset CSS properties. Use it with care alongside .css() or .animate() to restore styles.
2. Usage of jQuery stop() Method
Below are different ways you can use the stop() method with various parameter combinations.
2.1. jQuery stop() - Default Values
By default, jQuery stop() halts the animation currently in progress on the selected element, while allowing any remaining animations in the queue to continue as scheduled.
Basic stop()
// Stop only the current animation
$('#stopBtn').click(function(){
$('#panel').stop();
});
2.2. jQuery stop() – Clear Queue
Using true for clearQueue immediately stops the current animation and clears all animations waiting in the queue. The element stays at its current position and does not jump to the end of the animation.
Example
$(document).ready(function(){
$('#startAnimBtn').click(function(){
$('#panel').css({ left: 0, top: 0, width: '100px' })
.animate({ left: '250px' }, 1000)
.animate({ top: '80px' }, 1000)
.animate({ width: '250px' }, 1000);
});
$('#stopClearQueueBtn').click(function(){
// Stop and clear queue
$('#panel').stop(true, false);
});
});
2.3. jQuery stop() – Jump to End
Using true for jumpToEnd makes the current animation finish instantly. The element jumps to the final state of the current animation, but animations in the queue are not removed.
Example
$(document).ready(function(){
$('#startAnimBtn').click(function(){
$('#panel').css({ left: 0, top: 0, width: '100px' })
.animate({ left: '250px' }, 1000)
.animate({ top: '80px' }, 1000)
.animate({ width: '250px' }, 1000);
});
$('#jumpToEndBtn').click(function(){
// Jump to end of current animation, keep queue
$('#panel').stop(false, true);
});
});
2.4. stop() vs. stopPropagation()
Don’t confuse stop() with stopPropagation() event methods.
- stop() halts animations.
- stopPropagation() prevents event bubbling.
Use stop() to keep animations responsive, and stopPropagation() to manage event flow.
3. Wrapping Up jQuery stop()
The jQuery stop() method is essential for controlling animation queues, preventing UI jank, and building clean, interactive experiences. Master its parameters like clearQueue and jumpToEnd to fine-tune your animations.