jQuery Effect stop() Method

Quiz

The stop() method in jQuery used to stop the currently running animation on the selected elements.

This method stops the animation on selected elements, It can clear the animation queue, preventing any queued animations from running. Optionally jumps to the end of the animation, depending on the parameters passed.

Syntax

Following is the syntax of stop() method in jQuery −

$(selector).stop(stopAll,goToEnd)

Parameters

This method accepts the following optional parameters −

stopAll (optional): A boolean value that indicates whether to stop the queued animations on the selected element(s). Default is "false".
goToEnd (optional): A boolean value that indicates whether to complete the current animation immediately by jumping to the end. Default is "false".

Example 1

The following example demonstrates how to stop the currently running animation using the stop() method −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
      $("#startBtn").click(function(){
          $("div").animate({height: 200}, 2000);
          $("div").animate({width: 200}, 2000);
      });
      $("#stopBtn").click(function(){
        $("div").stop();
      });
  });
  </script>
</head>

<body>
<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>
<div style="background:#40a944; height:100px; width:100px"></div>
</body>
</html>

There are two animations in the animation queue. When we click on "start" button, the first animation (height) in the queue will start and if we click on the "stop" button, the first running animation will stop and the second animation will start immediately.

Example 2

The following example demonstrates how to stop the queued animations using the stop() method. To do so, we need to provide the "stopAll" parameter to the stop() method as shown below −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
      $("#startBtn").click(function(){
          $("div").animate({height: '400'}, 1000);
          $("div").animate({width: '400'}, 1000);
          $("div").animate({height: '200'}, 1000);
          $("div").animate({width: '200'}, 1000);
      });
      $("#stopBtn").click(function(){
          $("div").stop(true);
      });
  });
  </script>
</head>

<body>
<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>
<div style="background:#40a944; height:100px; width:100px;"></div>
</body>
</html>

There are 4 animations in the queue. When we click on "start" button, the first animation (height) will start and if we click on the "stop" button, the next animations in the queue will not start.

Example 3

The following example demonstrates how to complete all animations immediately using the stop() method −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
      $("#startBtn").click(function(){
          $("div").animate({height: '400'}, 1000);
          $("div").animate({width: '400'}, 1000);
          $("div").animate({height: '200'}, 1000);
          $("div").animate({width: '200'}, 1000);
      });
      $("#stopBtn").click(function(){
          $("div").stop(true, true);
      });
  });
  </script>
</head>

<body>
<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>
<div style="background:#40a944; height:100px; width:100px;"></div>
</body>
</html>

There are 4 animations in the queue. When we click on "start" button, the first animation will begin. If we click on the "stop" button, the first animation will complete and end. The same goes for second, third, and fourth animations.

jquery_ref_effects.htm

Print Page