I'm aware of doing that 'magic' inside $.when(). How should I achieve same effect writing code more readable ? I read something about a $.Defferer() that I think should help but I don't know how to use it.

<!DOCTYPE html>
<html lang="en">
	<meta charset="UTF-8">
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script type="text/javascript">
					$(this).delay(800*index).animate({'opacity': '0'},1000);
					$('.console').find('p').text("all animations done");
    <div class="console"><p></p></div>
	<div class="elm"><h1>Element 1</h1></div>
	<div class="elm"><h1>Element 2</h1></div>
	<div class="elm"><h1>Element 3</h1></div>

What I want is to run multiple animations and at the end of them to show a message, to do something. I know that I can use $(".elm").animate() and all elm divs will be animated by I use that .each() to set the delay between them (maybe there's another posibility using animation step or progress handlers), but I can't get it to do something at the end of all animations. What I ask is if there's any other implementation that will to same thing and be more code readeable.

  • \$\begingroup\$ While your question is good, I would add a bit of explanation about what your code really do. \$\endgroup\$
    – Marc-Andre
    Sep 17, 2014 at 15:12

1 Answer 1


I'd say your approach is correct. Since your delay is less than the duration, you can't use a series approach, where one completed animation starts the next. So your setup is probably the simplest you can do.

To make it more readable, the simplest thing would be to split the code up a bit:

$(function () { // same as $(document).read(...)
  // declare some "constants"
  var animationDelay = 800,
      animationDuration = 1000;

  // setup all the animations
  var queue = $(".elm").each(function (i) {
    $(this).delay(i * animationDelay).animate({opacity: 0}, {duration: animationDuration});

  // set up the callback for when they finish
  $.when(queue).then(function () {
    // all animations done

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.