The animations or effects make the content presentable for end users. jQuery offers various methods such as animate(), fadeIn(), fadeout() etc., to add animation or effect. What if, you want to stop animation or effect? You can do so as well, let’s see how?
The stop() method assists to stop animation or effect in jQuery. The stop method provides manifold functionality, like stopping the animation/effect instantly or sequentially. This article demonstrates the ways to stop the animation or an effect in jQuery.
How to stop animation or effect in jQuery
The stop() method in jQuery helps in stopping the animation or effect that is running. The syntax of the stop() method is shown below.
$(selector).stop(clearQueue, jumpToEnd);
The selector could be any HTML element or class/id of the element. Moreover, the stop() method offers two parameters (that are optional but not necessary)
- clearQueue: It accepts Boolean values (either true or false) and decides about the stopping of upcoming animations. The false(default value) value directs that only the current animation will be stopped, and other queued animations will be started afterward. Whereas the true value terminates the animation instantly.
- jumpToEnd: Its default value is false, if the true value is assigned then it ends the animations and the queue is cleared as well.
The above syntax works for various jQuery methods such as fading(), sliding(), show(), hide() as well.
How to stop animations in jQuery
This section practices a few examples that guide to stop animations in various scenarios using the stop() method.
Example 1: using stop() method without parameters
<script>
$(document).ready(function(){
$(“.start”).click(function(){
$(“div”).animate({
width: “1250px”,
}, 5000);
});
$(“.stop”).click(function(){
$(“div”).stop();
});
});
</script>
The above code animates the width of the div with a speed of milliseconds= “5000“. Moreover, the stop() method stops the ongoing animation.
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image5-32.png" data-lazy- height="603" src="data:image/svg xml,” width=”708″>
Output
Before animating
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image7-31.png" data-lazy- height="199" src="data:image/svg xml,” width=”343″>
After applying the stop() method randomly (stopping anywhere)
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image6-30.png" data-lazy- height="232" src="data:image/svg xml,” width=”676″>
Example 2: using stop() method with parameters
The following code practices stop() method by using both parameters. And the value of the parameter is set to true.
<script>
$(document).ready(function(){
$(“.start”).click(function(){
$(“div”).animate({
width: “1250px”,
}, 5000);
});
$(“.stop”).click(function(){
$(“div”).stop(true,true);
});
});
</script>
The above code animates the width property and then the stop(true,true) method is applied.
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image9-20.png" data-lazy- height="585" src="data:image/svg xml,” width=”682″>
Output
Before doing any action
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image8-23.png" data-lazy- height="195" src="data:image/svg xml,” width=”331″>
After starting the animation, when the stop-animation button is clicked the animation ends immediately.
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image2-49.png" data-lazy- height="244" src="data:image/svg xml,” width=”1308″>
How to stop the fading() effect in jQuery
The stop() method in jQuery can be used to stop an effect as well. The code provided below exercises the fading effect and then the stop() method to stop that effect.
The above code fades-out the div at speed of 2500 milliseconds and the stop method is used to stop the fading out method.
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image1-46.png" data-lazy- height="562" src="data:image/svg xml,” width=”687″>
Output
Before start/stop of fading process
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image4-46.png" data-lazy- height="262" src="data:image/svg xml,” width=”389″>
After the fading-out process is started, when the stop button is clicked the fading process will be stopped as shown in the image below(in our case).
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/03/echo/image3-45.png" data-lazy- height="264" src="data:image/svg xml,” width=”393″>
Conclusion
The stop() method of jQuery is used to stop the animation or an effect. The stop() method accepts two parameters, and it can be applied without parameters as well. Both parameters are Boolean in nature and thus true/false values are accepted only. You would have learned the application of the stop() method to stop animation in jQuery. Moreover, the stop() method is also exercised on a fadeOut() method in jQuery.
