jQuery Effect: Stop an animation

Last update on August 19 2022 21:51:35 (UTC/GMT +8 hours)

jQuery Effect : Exercise-2 with Solution

Stop an Animation.
Sample Data :

HTML code:

<body>
<button id="btn1">Start Animate</button>
<button id="btn2">Stop Animate</button>
<div id="box" style="background:#5858FA;height:100px;width:100px;margin:6px;"></div>  
</body>

Solution:

HTML Code :

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>Stop an animation</title>
</head>
<body>
<button id="btn1">Start Animate</button>
<button id="btn2">Stop Animate</button>
<div id="box" style="background:#5858FA;height:100px;width:100px;margin:6px;"></div>  
</body>
</html>

JavaScript Code :

$("#btn1").click(function(){
        $("div").animate({height: 250}, 1200);
        $("div").animate({width: 250}, 1200);
        $("div").animate({height: 75}, 1200);
        $("div").animate({width: 75}, 1200);
    });

   $("#btn2").click(function(){
        $("div").clearQueue();
    });

Note : When the .clearQueue() method is called, all functions on the queue that have not been executed are removed from the queue.

Live Demo:

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

Contribute your code and comments through Disqus.

Previous: Animate an element, by changing its height and width.
Next: Set a timer to delay execution of subsequent items in the queue.