jQuery Stop Animations - jQuery stop() Method

jQuery stop() method is used to stop the animations (or effects) that is running on the selected elements before it is finished.

Syntax

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

Parameters

• stopAll Optional. Default: false This boolean parameter specifies that whether or not remove queued animation. It means only the current animation will be stopped, rest of the other animations in the queue will run afterwards.
• goToEnd Optional. Default: false This boolean parameter specifies that whether or not to complete the current animation immediately.

Example

$(document).ready(function() {
  $("#btnstart").click(function(){
      $("div").animate({
        marginLeft: "+=200px",
      }, 3000);
  });
  $("#btnstop").click(function(){
      $("div").stop();
  });
  $("#btnback").click(function(){
      $("div").animate({
        marginLeft: "0px",
      }, 3000);
  });
});

 
 
 

Example Result

jQuery stop() method with parameters

Example

$(document).ready(function() {
  $("#btnstart").click(function(){
      $("div").animate({marginLeft: "+=200px"}, 3000);
      $("div").animate({fontSize: "25px"}, 3000);
  });
  $("#btnstop").click(function(){
      $("div").stop();
  });
  $("#btnstopall").click(function(){
      $("div").stop(true);
  });
  $("#btnstopandfinish").click(function(){
      $("div").stop(true, true);
  });
  $("#btnback").click(function(){
      $("div").animate({marginLeft: "0px"}, 3000);
      $("div").animate({fontSize: "12px"}, 3000);
  });
});

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Example Result