jQuery Stop Animations
The stop() function of jQuery is used to stop animations or effects before they are completed.
Related Links
jQuery stop() Method
The jQuery stop() function is used to terminate an animation or effect before it has completed.
All jQuery effect methods, including as sliding, fading, and custom animations, may be stopped
using the stop() method at runtime.
Syntax :-
$(selector).stop(stopAll,goToEnd); The stopAll and goToEnd parameters are optional.
The stopAll parameter indicate whether or not the animation queue should also be removed.
The default is false and just the active animation will be paused and any pending animations can be carried out thereafter.
The goToEnd parameter defines whether or not the current animation should be completed immediately.
The default is false.
As a result, the stop() function, by default, terminates the current animation on the chosen element.
Example :- The example below shows the stop() function without parameterss:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#b1").click(function () {
$("#div1").stop();
});
$("#b2").click(function () {
$("#div1").slideToggle(3000);
});
});
</script>
</head>
<body>
<button id="b1">Stop Animation</button><br /><br />
<button id="b2">Slide Down/Up</button><br /><br />
<div id="div1" style="text-align: center; border: solid 1px #c3c3c3; padding: 50px;">
Hello world!</div>
</body>
</html> Output :-
Tip: Click the button "Stop Animation", while sliding down or up the element.
Related Links