Menu Close

jQuery Stop Animations Method

codeamend

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

Share

Posted in HTML, jQuery

You can also read...