jQuery animations with only one callback

Question

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.

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

Flambino · Accepted Answer · 2014-09-18 19:44:53Z

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
  });
});

Stack Exchange Network

jQuery animations with only one callback

1 Answer 1

You must log in to answer this question.

Hot Network Questions

jQuery animations with only one callback

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions