jQuery finish() with Example
The finish() method in jQuery is used to stop the currently-running animations. It removes all queued animations and completes all animations for the selected elements.
Syntax
The syntax is as follows −
$(selector).finish(queue)
Above, the queue parameter is the name of the queue to stop animation.
Example
Let us now see an example to implement the jQuery finish() method −
<!DOCTYPE html>
<html>
<head>
<style>
div {
background:orange;
height:200px;
width:200px;
padding: 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#begin").click(function(){
$("div").animate({height: 450}, 2000);
});
$("#end").click(function(){
$("div").finish();
});
});
</script>
</head>
<body>
<h2>Let's perform Animation</h2>
<p>
<button id="begin">Begin</button>
<button id="end">End</button>
</p>
<div></div>
</body>
</html>Output
This will produce the following output −
Now, click “Begin” to start animation −
Click “End” the Animation and complete it −
Published on 12-Nov-2019 12:43:59
