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:

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.


<!DOCTYPE html>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
#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;  
<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>  
Try Now