jQuery Stop Animations

The stop() function of jQuery is used to stop animations or effects before they are completed.

You can also search for these topics, how to stop animation example in progress using jquery, scrolltop jquery to stop animate, hover the jquery stop animation, jquery stop animation multiple clicks, mouseleave, ways to stop and continue jquery animation, jquery stop animation css, jquery stop previous and current animation, stop and resume animation, end the jquery animation event.

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 :-

Hello world!

Tip: Click the button "Stop Animation", while sliding down or up the element.

You can also search for these topics, jquery stop method execution, how to stop execution of script in jquery, jquery stop function on hover, syntax and example for jQuery stop() Method, jquery stop() method parameters.