jQuery Stop Effect

The jQuery stop() method is used to stop the jQuery animation or effect before it is finished. The jQuery stop() method works for all jQuery effects like: custom animations, fading and sliding. Syntax:

$(selector).stop(stopAll,goToEnd);
stopAll: The optional stopAll Boolean parameter is used to specify whether the animation queue should be cleared or not. goToEnd: The goToEnd Boolean parameter is optional and it is used to specify whether the current animation immediately complete.

Example:

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<script>   
$(document).ready(function(){  
    $("#flip").click(function(){  
        $("#panel").slideDown(5000);  
    });  
    $("#stop").click(function(){  
        $("#panel").stop();  
    });  
});  
</script>    
<style>   
#panel, #flip {  
    padding: 5px;  
    font-size: 18px;  
    text-align: center;  
    background-color: #555;  
    color: white;  
    border: solid 1px #666;  
    border-radius: 3px;  
}    
#panel {  
    padding: 50px;  
    display: none;  
}  
</style>  
</head>  
<body>    
<button id="stop">click here to stop sliding</button>   
<div id="flip">Click here to slide down the panel</div>  
<div id="panel">Hi Friends!</div>  
</body>  
</html>
Try Now