![]() |
jQuery stop function CodingTuting Image by Arek Socha from Pixabay |
Sometimes we need to stop any function in jQuery in the middle. So How to stop function in jquery?
In this tutorial, we'll learn - How to use jQuery stop function.
Using jQuery stop() method/function, we can stop the currently running function. The stop() function in jQuery is very useful on the animations. It is used to stop the currently running animation.
We can stop the functions like jQuery fadeIn(), jQuery fadeOut(), jQuery slide() and more. We can resume the stoped animation too. This method is also known as jquery stop and resume animation.
Let's see
Syntax:
$(selector).stop(stopAllAnimations, jumpToEnd);
1st Parameter - stopAllAnimations
It is an "optional" boolean (true or false) parameter. It is used to stop all animations which are in the queue. The default value of this parameter is false.
2nd Parameter - jumpToEnd
It is an "optional" boolean (true or false) parameter. It is used to complete immediately the currently running animation. The default value of this parameter is false.
We'll understand the use of these parameters in this tutorial.
Example of without parameter:
Start the animation by click on the "Start" button. And stop the animation by clicking the "Stop" button.
Example with parameter:
1) $(selector).stop(true);Here, stopAllAnimations parameter is set to true.
There are 4 animations here in the queue. left, down, right and top.
All queued animations will stop once we click on the "Stop" button.
2) $(selector).stop(false, true);
Here, jumpToEnd parameter is set to true.
There are 4 animations here in the queue. left, down, right and top.
It'll complete immediately the current animation and move to the next animation, once we click on the "Stop" button.
Source Code of the above Example
HTML and CSS<style> .myBox { background:#ff0000; height:100px; width:100px; position: relative; margin-top:20px; } </style> <button id="startAnimation"> Start </button> <button id="stopAnimation"> Stop </button> <div class="mybox"></div>
jQuery function
$(document).ready(function(){ $("#startAnimation").click(function(){ $(".mybox").animate({ left: "+=300px" }, 2000 ); $(".mybox").animate({ top: "+=100px" }, 2000 ); $(".mybox").animate({ left: "-=300px" }, 2000 ); $(".mybox").animate({ top: "-=100px" }, 2000 ); }); $("#stopAnimation").click(function(){ $(".mybox").stop(false, true); }); });
We hope you got - How to stop jQuery Function from execution. If there is any bug in this tutorial please let us know in the comment.
We would like your suggestion on any topic. Please suggest us, we'll try to post about that topic as soon as. If you've any query regards the Web Design, Development, etc. Please comment.
Sharing is Caring
Thanks for Reading
- jquery stop animation and effect
- jquery stop function from running
- jquery stop event
- jquery stop animate
- jquery stop and resume animation
- how to use jquery stop function
- how to stop function in jquery
- how to stop jquery function
- How do you stop the currently running animation
- how to create top navigation bar
- how to Stop jQuery Event Functions
- how to stop jquery execution
EmoticonEmoticon