2
\$\begingroup\$

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">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){	
			$.when(
				$('.elm').each(function(index){
					$(this).delay(800*index).animate({'opacity': '0'},1000);
				})
			).then(function(){
					$('.console').find('p').text("all animations done");
			});
		});
		</script>
</head>
<body>
    <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>
</body>
</html>

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.

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

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
  });
});
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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