jQuery stop() method is used to stop an animation or a jQuery effect before it is finished.
jQuery stop() method Syntax
$(selector).stop(clearQueue, goToEnd);
clearQueue is an optional boolean parameter. By default it is false but when set to true, it clears the animation queue, stopping the current and all the queued animations to stop immediately.
goToEnd is an optional boolean parameter. By default it is set to false, but when set to true, it causes currently running animation to immediately complete.
jQuery stop() method Example
In the following example we have two buttons “Start” and “Stop”. The Start button starts the animation, which gradually increases the font size of specified text to 10em, in between if we stop the animation by clicking on the Stop button, it stop the animation immediately and the font size never reaches 10em.
Here in the output screenshot you can see I have stopped the animation in between and the font size is not 10em.
The stop() method is generally useful when the animation or effect speed is slow, then only you get the chance to stop the animation in between, else the effect/animation will complete before you get a chance to stop them, this is the reason I have set the speed to 5000 milliseconds in the following example to slow down the animation speed.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#start").click(function(){
var para = $("p");
para.animate({fontSize: '10em'}, 5000);
});
$("#stop").click(function(){
$("p").stop();
});
});
</script>
</head>
<body>
<h2>jQuery Stop Animation example</h2>
<p>BeginnersBook.com</p>
<button id="start">Start</button>
<button id="stop">Stop</button>
</body>
</html>
Output:
Leave a Reply