While creating and running an animation effect you always think of how to stop animation effect before it gets finished. JQuery offers the simple stop method you can use to stop the animation effect by clicking the button.
Stop Animation Effect
If you want to stop the jQuery animation effect before it gets finished, you can use the jQuery stop method.
The syntax of stop() method is given below.
Syntax of stop()
|
1 |
$(selector).stop(stopAll,gotoEnd) |
The syntax of stop() method contains the three parameters e.g selectors, stopAll and gotoEnd. only the selector is the required fields and the other two parameters located within the stop function can be used optionally.
| Sr. No | Parameter Name | Description |
|---|---|---|
| 1 | selector | To apply animation effect, you need to first access HTML element, after that you can stop animation using the stop method. It is the required parameter. |
| 2 | stopAll | If you want to stop the current as well as all the queued animations, you can use this parameter. The default value of this parameter is false. This is the optional parameter. |
| 3 | gotoEnd | If you want to complete the animation immediately when clicking the button and any other event, you can do so by using this parameter. It is the optional parameter. |
Example of animate()
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> $(document).ready(function(){ $("#btn-animate").click(function(){ $("#para-animate").animate({margin:'200px'}, 6000); }); $("#btn-stop").click(function(){ $("#para-animate").stop(); }); }); </script> <button id="btn-animate">Click me to Animate</button> <button id="btn-stop">Stop Animate</button> <div id="para-animate" style="width:50px;height:50px;background:#ccc;margin-top:5px;"></div> |
Output
jQuery Stop Animation Effect in Queued Animation
If you want to stop all the queued animation effects with multiple CSS properties performing animation one by one in the queue process, you can use the stop function with the stopAll parameter.
Below is the simple example you can check and use in your project.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> $(document).ready(function(){ $("#btn-animatequeue").click(function(){ $("#para-animatequeue") .animate({margin: "90px"}) .animate({width: "300px"}) .animate({height: "200px"}) .animate({padding: "30px"}) .animate({width: "200px"}) .animate({opacity: 0.6}); }); $("#btn-stopqueue").click(function(){ $("#para-animatequeue").stop(true); }); }); </script> <button id="btn-animatequeue">Click me to animate</button> <button id="btn-stopqueue">stop animate</button> <div id="para-animatequeue" style="width:100px;height:100px;background:#ccc;margin-top:5px;"></div> |
Output
jQuery Stop Animation Effect with the Second Parameter in Queued Animation
If you want to stop queued animation effect and go to the end queue process of animation immediately, you can use the stop function with the second parameter. Use the second parameter by putting the true string as the second parameter.
find out below how you can perform this in your project.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> $(document).ready(function(){ $("#btn-animateend").click(function(){ $("#para-animateend") .animate({margin: "90px"}) .animate({width: "300px"}) .animate({height: "200px"}) .animate({padding: "30px"}) .animate({width: "200px"}) .animate({opacity: 0.6}); }); $("#btn-stopend").click(function(){ $("#para-animateend").stop(true,true); }); }); </script> <button id="btn-animateend">Click me to animate</button> <button id="btn-stopend">stop animate</button> <div id="para-animateend" style="width:100px;height:100px;background:#ccc;margin-top:5px;"></div> |
Output