jQuery finish() with Example

jQuery Web Development Front End Technology

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 −

AmitDiwan

Updated on: 12-Nov-2019

118 Views

Kickstart Your Career

Get certified by completing the course

Get Started