jQuery stop animation

Filed Under: jQuery

We can use jQuery stop() function to stop the currently running animation on the matched elements.

jQuery stop()

There are two variants of jQuery stop() function.

  1. stop(boolean clearQueue, boolean jumpToEnd): Default value of both the argument is false. We can pass clearQueue as true to stop the queued animation. We can pass jumpToEnd as true to complete the current animation immediately.
  2. stop(String queue, boolean clearQueue, boolean jumpToEnd): Here we can pass the name of the queue to stop the animation, other two arguments are same as above.

jQuery stop animation

Here is a simple example for jQuery stop animation.


<!DOCTYPE html>
<html>
<head>
<title> jQueryClear Queued Function</title>
<script src="jquery-3.2.1.min.js"></script>
<script> 
$(document).ready(function(){
  $("#startbtn").click(function(){
    $("div").animate({height:200}, 2000 );
  });
  $("#stopbtn").click(function(){
    $("div").stop();
  });
});
</script> 
</head>
<body>
 
<button id="startbtn">Start</button>
<button id="stopbtn">Stop</button>
 
 
<div style="background:green;height:90px;width:90px;">
</div>
  
</body>
</html>

Notice that I am not passing any parameter with stop() function call, it’s because there is only one animation and I want it to stop as soon as stop button is clicked.

jQuery stop animation queue

Here is an example where animation queue is cleared and current running animation is also stopped when stop button is clicked.


<!DOCTYPE html>
<html>
<head>
<title> jQueryClear Queued Function</title>
<script src="jquery-3.2.1.min.js"></script>
<script> 
$(document).ready(function(){
  $("#startbtn").click(function(){
    $("div").animate({height:200}, 2000 );
    $("div").slideUp(2000 );
    $("div").slideDown(2000 );
    $("div").animate({width:300},1500);
    $("div").animate({height:100},1500);
    $("div").animate({width:100},1500);
  });
  $("#stopbtn").click(function(){
   // $("div").clearQueue();
    $("div").stop(true, false);
  });
});
</script> 
</head>
<body>
 
<button id="startbtn">Start</button>
<button id="stopbtn">Stop</button>
 
 
<div style="background:green;height:90px;width:90px;">
</div>
  
</body>
</html>

Below image shows the above program in action.

jquery stop animation

That’s all for jQuery stop() function and jQuery stop animation example.

Reference: API Doc

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages