jQuery Effect: Finish a currently running animation

Last update on May 30 2022 10:19:50 (UTC/GMT +8 hours)

jQuery Effect : Exercise-9 with Solution

Finish a currently running animation:

Solution :

HTML Code :

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Finish a currently running animation</title>
</head>
<body>
<p>
<button id="start">Start Animation</button>
<button id="finish">Finish Animation</button>
</p>

<div style="background:#8942D5;height:100px;width:100px"></div>
</body>
</html>

JavaScript Code :

$("#start").click(function(){
        $("div").animate({height: 275}, 4000);
        $("div").animate({width: 275}, 4000);
    });
    $("#finish").click(function(){
        $("div").finish();
    });

Note :
In jQuery finish( [queue ] ) method is used to stop the currently-running animation, remove all queued animations, and complete all animations for the matched elements. It has the following parameters :

queue : The name of the queue in which to stop animations. [Type: String]

Live Demo:

See the Pen jquery-effect-exercise-9 by w3resource (@w3resource) on CodePen.

Contribute your code and comments through Disqus.

Previous: Toggle between fading in and fading out different boxes
Next: Animates all shown paragraphs to hide slowly (complete the animation within specified time).