jQuery Stop Animations
What is the stop() Method in jQuery?
The stop() method is used to stop an ongoing animation before it completes.
Why Use the stop() Method?
✅ Stops animations immediately – Prevents animations from stacking up.
✅ Provides better control – Avoids unwanted animation loops.
✅ Works with all jQuery effects – fade(), slide(), animate(), etc.
How Does the stop() Method Work?
Syntax:
$(selector).stop(clearQueue, jumpToEnd);
| Parameter | Description |
|---|---|
| clearQueue | true – Clears pending animations in the queue. false – Keeps them. (Default: false) |
| jumpToEnd | true – Jumps to the final state of the animation. false – Stops at the current position. (Default: false) |
📌 Tip: If no parameters are provided, stop() will just stop the current animation.
Examples of Using the stop() Method
1. Stopping an Animation Midway
👉 Example: Start and stop an animation on a div.
$(“#startBtn”).click(function() {
$(“#box”).animate({ width: “300px” }, 3000);
});
$(“#stopBtn”).click(function() {
$(“#box”).stop();
});
📌 What happens?
• Clicking Start Animation starts expanding the #box.
• Clicking Stop Animation immediately stops the animation.
2. Stopping an Animation and Clearing the Queue
👉 Example: Stop the animation and remove all queued animations.
$(“#stopBtn”).click(function() {
$(“#box”).stop(true);
});
📌 What happens?
• Any pending animations will be removed immediately.
• stop(true); → Clears the queue but does not complete the current animation.
• stop(true, true); → Clears the queue and instantly finishes the animation.
• Use stop(true, true); if you want to avoid partially animated elements.
3. Stopping an Animation and Jumping to the End
👉 Example: Stop an animation and jump to its final state.
$(“#stopBtn”).click(function() {
$(“#box”).stop(false, true);
});
📌 What happens?
• Clicking “Start Animation” triggers three animations in sequence:
– width expands to 300px.
– height expands to 200px.
– Moves left by 200px.
• Clicking “Stop Animation (Finish Current)”:
– The current animation instantly completes.
– Next queued animations continue.
Conclusion
🎯 The stop() method is used to pause running animations.
🎯 stop(true) removes pending animations from the queue.
🎯 stop(false, true) jumps to the final animation state.
🎯 It helps in preventing animation stacking issues.
