We can use jQuery stop() function to stop the currently running animation on the matched elements.
jQuery stop()
There are two variants of jQuery stop() function.
- stop(boolean clearQueue, boolean jumpToEnd): Default value of both the argument is false. We can pass clearQueue as true to stop the queued animation. We can pass jumpToEnd as true to complete the current animation immediately.
- stop(String queue, boolean clearQueue, boolean jumpToEnd): Here we can pass the name of the queue to stop the animation, other two arguments are same as above.
jQuery stop animation
Here is a simple example for jQuery stop animation.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <title> jQueryClear Queued Function</title> <script src="https://www.journaldev.com/4647/jquery-3.2.1.min.js"></script> <script> $(document).ready(function(){ $("#startbtn").click(function(){ $("div").animate({height:200}, 2000 ); }); $("#stopbtn").click(function(){ $("div").stop(); }); }); </script> </head> <body> <button id="startbtn">Start</button> <button id="stopbtn">Stop</button> <div style="background:green;height:90px;width:90px;"> </div> </body> </html> |
Notice that I am not passing any parameter with stop() function call, it’s because there is only one animation and I want it to stop as soon as stop button is clicked.
jQuery stop animation queue
Here is an example where animation queue is cleared and current running animation is also stopped when stop button is clicked.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <title> jQueryClear Queued Function</title> <script src="https://www.journaldev.com/4647/jquery-3.2.1.min.js"></script> <script> $(document).ready(function(){ $("#startbtn").click(function(){ $("div").animate({height:200}, 2000 ); $("div").slideUp(2000 ); $("div").slideDown(2000 ); $("div").animate({width:300},1500); $("div").animate({height:100},1500); $("div").animate({width:100},1500); }); $("#stopbtn").click(function(){ // $("div").clearQueue(); $("div").stop(true, false); }); }); </script> </head> <body> <button id="startbtn">Start</button> <button id="stopbtn">Stop</button> <div style="background:green;height:90px;width:90px;"> </div> </body> </html> |
Below image shows the above program in action.
That’s all for jQuery stop() function and jQuery stop animation example.
Reference: API Doc