Menu Close

jQuery Stop Animations Method

5
(1)

The jQuery stop() method is used to stop animations or effects before it is finished. 

This method works for all jQuery effect functions, sliding, fading and custom animations. The below example shows the stop sliding animation.

Syntax:

$(selector).stop(stopAll, goToEnd); 

Example:

<!DOCTYPE html>
<html>  
<head>
    <title>jQuery stop() Animation Method</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        #panel,
        #flipto {padding: 5px;font-size: 18px;text-align: center;background-color: black;color: white;border: solid 1px #666;
            border-radius: 3px;}
        #stop{background-color: yellow;}
        #panel {text-color: white;padding: 50px;display: none;}
    </style>
</head>  
<body>
    <center>
        <h3>jQuery stop() Animation Method</h3>
        <button id="stop">Click Here to stop</button> 
        <br><br>
        <div id=""><button id="flipto">Click Here to slideDown</button></div>
        <div id="panel">Animation Panel</div>
        <script>
            $(document).ready(function() {
                $("#flipto").click(function() {
                    $("#panel").slideDown(5000);
                });
                $("#stop").click(function() {
                    $("#panel").stop();
                });
            });
        </script>
    </center>
</body>  
</html> 

Output:

jQuery stop() Animation Method

jQuery stop() Animation Method



Animation Panel

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Share

Posted in HTML, jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *

You can also read...