Google News
logo
jQuery stop() Method
The jQuery stop() method is used to stop the jQuery animations or effects currently running on the selected elements before it finished.

The jQuery stop() method works for all jQuery effect functions, including sliding, fading and custom animations. The basic syntax of the jQuery stop() method can be given.
Syntax :

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

The optional stopAll Boolean parameter specifies whether also the animation queued should be cleared or not. Default value is false, that means only the current animation will be stopped, rest of the animations in the queue will run afterwards.

The optional goToEnd Boolean parameter specifies whether to complete the current animation immediately. Default value is false.

Here's a simple example that demonstrates the jQuery stop() method in real action in which you can start and stop the animation on click of the button.

<!DOCTYPE html>
<html>
<head>
<title>jQuery stop() method</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    // Start animation
    $(".start-btn").click(function(){
      $("img").animate({left: "+=200px"}, 2000);
    });
    // Stop running animation
    $(".stop-btn").click(function(){
      $("img").stop();
    });
   
    // Start animation in the opposite direction
    $(".back-btn").click(function(){
      $("img").animate({left: "-=200px"}, 2000);
    });
    // Reset to default
    $(".reset-btn").click(function(){
      $("img").animate({left: "0"}, "fast");
    });
});
</script>
 
<style type="text/css"> 
.btn{ padding:6px 12px; margin:5px 0px;}
img{position: relative;}
</style>
</head>
 
<body>
 
    <button type="button" class="start-btn btn">Start</button>
    <button type="button" class="stop-btn btn">Stop</button>
    <button type="button" class="back-btn btn">Back</button>
    <button type="button" class="reset-btn btn">Reset</button>
    
    <p><img src="images/Free-Time-Learning.png" alt="Free Time Learning"></p>
    
</body>
</html>
Output :
jQuery stop() method - Stop sliding
<!DOCTYPE html>
<html>
<head>
<title>jQuery stop() method</title>
 
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("#click_here").click(function(){
        $("#panel").slideDown(5000);
    });
    $("#stop").click(function(){
        $("#panel").stop();
    });
});
</script>
 
<style type="text/css"> 
#panel, #click_here { 
padding:5px; text-align: center;  
background-color:#0099da; 
border:solid 1px #0099da; 
color:#FFF;
}
#panel{padding:20px 30px 50px; color:#000; display:none; background:#EEE;}
.btn{ padding:6px 12px; margin:5px 0px;}
</style>
</head>
 
<body>
<button type="button" id="stop" class="btn">Stop</button>
<a href="#" style="text-decoration:none;">
  <div id="click_here">Click Here! (Start Sliding)</div>
</a>
<div id="panel">This is sample stop() method.</div>
    
</body>
</html>
Output :