Updated April 7, 2023
Introduction to jQuery stop animation
The jQuery stop animation is used to stops the currently running animations for the selected elements. The jQuery stop() function is used to immediately stop the animation. The jQuery stop() function is a built-in function in jQuery. The jQuery stop() function stops the animation effects functions like fading, sliding, and custom animations. Sometimes we need to stop the animation before it finishes, for example in the queued animation on the same element if we have to apply more than one animation function, then the animation which is in the queue will not start until the currently running animation finishes. So in this case we can use the stop() function to stop the currently running animation so that the next animation in the queue begins immediately.
The syntax of the jQuery stop animation –
$(selector).stop(clearQueue, jumpToEnd);Parameters –
clearQueue – This is an optional parameter. It specifies whether to clear or remove all queued animation or not. It is a Boolean type parameter, if the true value is passed, then the queued animation will never run. The default value is false.
jumpToEnd – This is an optional parameter. It specifies whether to complete the current animation or not. It is a Boolean type parameter, if the true value is passed, then the current animation complete immediately. The default value is false.
Return value –
The return value of this function is the immediate previous siblings.
The working of the jQuery stop animation –
The jQuery stop() function accepts two parameters. Suppose we have a div element that has some text content with some animations. Now we need to stop all the animations on the div element so we can use the stop() function as “$( “#divid” ).stop( true, true );”, which stops the current animation and also clears the animation queue.
Examples for the jQuery stop animation
Here are the follwoing examples mention below
Example #1
Example of jQuery stop animation with stop() function without any parameter –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery stop animation </title>
<style>
#flip {
padding : 5px;
font-size : 18px;
text-align : center;
background : yellow;
color : black;
border : solid 1px #666;
border-radius : 3px;
}
</style>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#flip").animate({ width: 400 }, 2000);;
});
$("#btn2").click(function(){
$("#flip").stop();
});
});
</script>
</head>
<body>
<h3> This an example of jQuery stop animation with stop() function : </h3>
<div > Click below button to the current animation.</div>
<button id = "btn1"> Start animation </button>
<button id = "btn2"> Stop animation </button>
<div id = "flip"> This is an example text with animation. </div>
</body>
</html>An output of the above code is –
Once we click on the p text content, the output is –
In the above code, there is a div element whose content is animated, which starts once we click on the button “start animation” and when we click on another button “Stop animation” it stops the running of the current animation. The “Stop animation” button calls the stop() function as “$(“#flip”).stop();” to stop the current animation, as we can see in the above output.
Example #2
Example of jQuery stop animation with stop() function with first parameter as true –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery stop animation </title>
<style>
#flip {
padding : 5px;
font-size : 18px;
text-align : center;
background : lightgreen;
color : black;
border : solid 1px #666;
border-radius : 3px;
}
</style>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#flip").animate( { width: 300 }, 2000);
$("#flip").animate( {height: 400 }, "slow");
$("#flip").animate( {width: 250 }, "slow");
});
$("#btn2").click(function(){
$("#flip").stop( true );
});
});
</script>
</head>
<body>
<h3> This an example of jQuery stop animation with stop() function : </h3>
<div > Click below button to stop the current animation.</div>
<div id = "flip"> Thi is an example text with animation. </div>
<br><br>
<button id = "btn1"> Start animation </button>
<button id = "btn2"> Stop animation </button>
</body>
</html>An output of the above code is –
Once we click on the button, the output is –
In the above code, there is a div element whose content is animated with multiple animations, which starts once we click on the button “start animation” and when we click on another button “Stop animation” it stops the running of the current animation and also clear all the animation from the queue. The “Stop animation” button calls the stop() function as “$(“#flip”).stop(true);” to stop the current animation, as we can see in the above output.
Example #3
Example of jQuery stop animation with stop() function with first and second parameters as true –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery stop animation </title>
<style>
#flip {
padding : 5px;
font-size : 18px;
text-align : center;
background : lightgreen;
color : black;
border : solid 1px #666;
border-radius : 3px;
}
</style>
<script>
$(document).ready(function(){
$("#flip").hover(function(){
$("#flip").animate( {width: 250 }, "slow");
$("#flip").fadeOut();
$("#flip").animate( {height: 400 }, "slow");
});
$("#btn").click(function(){
$("#flip").stop( true );
});
});
</script>
</head>
<body>
<h3> This an example of jQuery stop animation with stop() function : </h3>
<div > Hover on the below image to start the animation.</div>
<button id = "btn"> Click here to stop the animation </button>
<br><br>
<img id = "flip" src = "educba.jpg" alt = "" width = "100" height = "123">
</body>
</html>An output of the above code is –
Once we hover on the image the animation starts, then click on the button, the output is –
In the above code, there is an img element that is animated with multiple animations, the animations start once we hover on the image and when we click on the button. It again starts animating while hovering on the imagd. The “Stop animation” button calls the stop() function as “$(“#flip”).stop( true );” to stop the current animation, as we can see in the above output.
Conclusion
The jQuery stop() function is a built-in function, which is used to stops the currently running animations for the selected elements.
Recommended Articles
This is a guide to jQuery stop animation. Here we discuss the working of the jQuery stop-animation along with the examples and outputs. You may also have a look at the following articles to learn more –
