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.
The syntax is as follows −
$(selector).finish(queue)
Above, the queue parameter is the name of the queue to stop animation.
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>
This will produce the following output −
Now, click “Begin” to start animation −
Click “End” the Animation and complete it −