jQuery stop() Method

jQuery stop() method stop the current animation which is running on the selected elements. When stop() method called on selected element, currently running animation is immediately stopped.

Syntax

This syntax represent to the stop() method

$(selector).stop( stopAll, jumpToEnd );
Parameter Type Description
stopAll Boolean Optional. A Boolean value indicating whether or not to stop the queued animations as well.
default value is false
jumpToEnd Boolean Optional. A Boolean value indicating whether or not to complete all animations immediately.
default value is false

Examples

Here, in this example show stop() effect on selected elements when click on button.

<!DOCTYPE html>
<html>
<head>
  <title>jQuery stop() method</title>
  <script src="jquery-latest.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#btnstart").click(function(){
          $("div").animate({
            marginLeft: "+=200px",
          }, 3000);
      });
      $("#btnstop").click(function(){
          $("div").stop();
      });
      $("#btnback").click(function(){
          $("div").animate({
            marginLeft: "0px",
          }, 3000);
      });
    });
  </script>
  <style type="text/css">
    #animatebox {
      width: 100px;
      height: 100px;
      position: absolute;
      background: #FC5E5E;
      border-color: #de2d2d;
    }
  </style>
</head>
<body>
  <button id="btnstart">Start</button>
  <button id="btnstop">Stop</button>
  <button id="btnback">Back</button>
  <br /><br />
  <div id="animatebox"></div>
</body> 
</html>

Run it...   »

jQuery stop() method with parameters example

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);
  });
});

Run it...   »

Example Result