jQuery finish() Method

Quiz

The jQuery finish() method stops the currently running animations on the selected elements and clears the animation queue, completing any remaining animations. This method affects only the elements that are currently animating or have queued animations.

Syntax

Following is the syntax of jQuery finish() method −

$(selector).finish(queueName)

Parameters

Here is the description of the above syntax −

queueName (optional): A string containing the name of the queue to stop the animations.

Example

In the following example, we are using the jQuery finish() method to finish the currently running animation −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            var box = $("#box");          
            $("#start").click(function(){
                box.animate({height: "200px"})
                   .animate({width: "200px"})
                   .animate({height: "50px"})
                   .animate({width: "50px"});
            });

            $("#stop").click(function(){
                box.finish();
            });
        });
    </script>
</head>
<body>
<div id="container">
    <button id="start">Start Animations</button>
    <button id="stop">Stop</button>
    <div id="box" style="height: 50px; width: 50px; background-color: green;"></div>
</div>
</body>
</html>

After executing, clicking "Start Animations" sequentially animates the div element, while clicking "Stop" immediately stops all animations and sets the box to the final state of the current animation.

jquery_ref_effects.htm

Print Page