jQuery stop() method

Sometimes we have to stop the animation before it finishes. The stop() method in jQuery is used to immediately stop the presently running animations for the matched elements. It is an inbuilt method in jQuery.

This method accepts two optional Boolean parameters that are clearQueue and jumpToEnd. The clearQueue parameter is used when we have to remove queued animations.

We can understand queued animations by an example - suppose we are applying more than one animation methods on the same element. So, the later animations are placed in a queue for that element. The animations in the queue will not begin before the completion of the first animation. In this case, when we apply the stop() method, the currently running animation is stopped, but the next animation in the queue starts immediately. If we set the clearQueue parameter to true, the queued animations never run.

Syntax

Parameter Values

The parameter values of this method are defined as follows.

clearQueue: It is an optional parameter. It is a Boolean value. When it is set to true, the queued animation never runs. It specifies whether or not to remove the queued animations. Its default value is false.

jumpToEnd: It is also a Boolean value. It is an optional parameter. Its default value is false. It specifies whether or not to complete the current animation immediately.

Let's see some examples to understand the stop() method.

Example1

It is a simple example of using the stop() method. In this example, we are not specifying any optional parameter of the stop() method. There are two buttons named Start and Stop. There is a div element that animates on clicking the Start button, and the animation will be stopped on click the Stop button.

<!DOCTYPE html>
<html>
<head>
<title> jquery stop() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("#start").click(function() {
$("div").text("Welcome to the javaTpoint.com").animate({ width: 400 }, 2000);
});
$("#stop").click(function() {
$("div").stop();
});
});
</script>
<style>
div {
background: lightgreen;
border: 4px dashed blue;
font-size: 25px;
height: 60px;
width: 60px;
margin-top: 15px;
}
</style>
</head>
<body>
<h4> This is an example of using jQuery's stop() method. </h4>
<button id = "start"> Start </button>
<button id = "stop"> Stop </button>
<div></div>
</body>
</html>

Test it Now

Example2

In this example, we are using both optional parameters of the stop() function, and set their value to true. There is a div element on which we are applying multiple animations. There are two buttons Start and Stop that starts or stops the animation accordingly.

<!DOCTYPE html>
<html>
<head>
<title> jquery stop() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("#start").click(function() {
$("div").animate({height: 250 }, "slow").text("Welcome to the javaTpoint.com");
$("div").animate({width: 250 }, "slow");
$("div").animate({height: 50 }, "slow");
$("div").animate({width: 400 }, "slow");
});
$("#stop").click(function() {
$("div").stop(true, true);
});
});
</script>
<style>
div {
background: lightgreen;
border: 4px dashed blue;
font-size: 25px;
height: 60px;
width: 60px;
margin-top: 15px;
}
</style>
</head>
<body>
<h4> This is an example of using jQuery's stop() method. </h4>
<button id = "start"> Start </button>
<button id = "stop"> Stop </button>
<div></div>
</body>
</html>

Test it Now

Next TopicjQuery trigger() method

← prev next →