jQuery stop()

What jQuery stop() Method?

The jQuery stop() method us used for the purpose of stopping an animations or effect before it is completed or finished.

The stop() method works for all the jQuery effect functions and this includes sliding, fading and custom animations.

Syntax:

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

The optional stopAllparameters areresponsible for specifying if or whether the animations queue should be cleared or not. In this the default is termed as false and this means that only the animation which is active will be stopped. This allows the queued animations to be performed after some time.

The optional goToEnd parameter is responsible for specifying whether to complete the current animation or not to complete it. In this also the default is false.The stop() method tends to kill the current animation which is being performed on the selected elements and this is default.

Example:
HTML Document (stop-slide.html)
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <title>CP Tutorials</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("h2").css({"background-color":"lightcoral","text-align":"center"});
            $("#show").click(function(){
                $("#content").slideDown(5000);
            });
            $("#stop").click(function(){
                $("#content").stop();
            });
        });
    </script>
    <style>
        #content,#show
        {
            padding:10px;
            background-color:lightgreen;
            border:solid 1px yellow;
            text-align:center;
            overflow: hidden;
        }
        #content
        {
            padding:40px;
            display:none;
        }
    </style>
</head>
<body>
<h2>Courses in CP Tutorials</h2>
<button id="stop">Stop sliding</button>
<div id="show">Click to slide down content</div>
<div id="content">
    <p>Web Designing:</p>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>XHTML</li>
        <li>XSLT</li>
    </ul>
    <p>Web Development: </p>
    <ul>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>PHP</li>
    </ul>
</div>
</body>
</html>