jquery exercises

jQuery Effect: Finish a currently running animation

jQuery Effect : Exercise-9 with Solution

Finish a currently running animation:

Solution :

HTML Code :

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

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

JavaScript Code :

        $("div").animate({height: 275}, 4000);
        $("div").animate({width: 275}, 4000);

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).

What is the difficulty level of this exercise?

New Content: Composer: Dependency manager for PHP, R Programming