Sometimes we wish to stop current running animation before it get finished. For this, in jQuery .stop() function is used to stop the running animation. This function works perfectly with various effects, fading, animations and sliding.

Syntax for Stop() jQuery

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

In the above one, stopAll parameter’s default value is false. And also it is an optional one, where the value is boolen. It is used to specify whether or not to stop the queued animations. Likewise, goToEnd is an optional parameter, which is used to mention whether or not to complete all animations immediately.

Example for Stop() without Parameter

Here, we can see one example for this stop() function to know how it works to stop animation. In this example, it doesn’t contains any parameter.

<head> 
        <title>The stop Method</title> 
        <script src= 
        "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
        </script> 
          
        <!-- jQurey code to show the working of this method -->
        <script> 
            $(document).ready(function() { 
                $("#gfg_start").click(function() { 
                    $("div").animate({ 
                        height: 300 
                    }, 1000); 
                    $("div").animate({ 
                        width: 300 
                    }, 1000); 
                }); 
                $("#gfg_stop").click(function() { 
                    $("div").stop(); 
                }); 
            }); 
        </script> 
        <style> 
            div { 
                background: green; 
                height: 60px; 
                width: 60px; 
            } 
            button { 
                margin-bottom:30px; 
            } 
        </style> 
    </head> 
    <body> 
        <!-- click on this button and animation will start -->
        <button id="gfg_start">Start</button> 
        <!-- click on this button and animation will stop -->
        <button id="gfg_stop">Stop</button> 
        <div></div> 
    </body>

Leave a Reply

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