Animations and queuing

You’ve seen how multiple properties of elements can be animated using a single animation method, but we haven’t examined how animations behave when you call simultaneous animation methods. In this section we’ll examine how animations behave in concert with each other.

Simultaneous animations

What would you expect to happen if you were to execute the following code?

$('#test-subject').animate({left: '+=256'}, 'slow');
$('#test-subject').animate({top: '+=256'}, 'slow');

You know that the animate() method doesn’t block while its animation is running on the page, nor do any of the other animation methods. You can prove that by experimenting with this code block:

console.log(1);
$('#test-subject').animate({left: '+=256'}, 'slow');
console.log(2);

If you were to execute this code, you’d see that the messages “1” and “2” are printed immediately on the console, one after the other, without waiting for the animation to complete. If you want to prove that this is true, take a look at the file lesson-8/-asynchronous.animate.html or the JS Bin we’ve created for you.

What would you expect to happen when you run the code with two animation method calls (the first snippet of this section)? Because the second method isn’t blocked by the first, it stands to reason that both animations fire off simultaneously (or within a few milliseconds of each other) and that the effect on the element animated would be the combination of the two effects. In this case, because one effect is adjusting the left style property and the other the top style property, you might expect that the result would be a meandering diagonal movement of the element.

Let’s put that to the test. In the file lesson-8/revolutions.html we’ve put together an experiment that sets up two images (one of which is to be animated) and a button to start the experiment. In addition, you’ll use the console to write some output. Figure 8.7 shows its initial state.

Figure 8.7. Initial state of the page where you’ll observe the behavior of multiple, simultaneous animations

The Animate button is instrumented as shown in the following listing.

Listing 8.7. Instrumentation for multiple simultaneous animations

In the click handler for the button , you fire off four animations, one after the other, interspersed with calls to console.log() that show you when the animation calls were fired off.

Bring up the page, and click the Animate button. As expected, the console messages “1” through “5” immediately appear on the console, as shown in figure 8.8, each firing off a few milliseconds after the previous one.

Figure 8.8. The console messages appear in rapid succession, proving that the animation methods aren’t blocking until completion.

But what about the animations? If you examine the code in listing 8.7, you can see that you have two animations changing the top property and two animations changing the left property. In fact, the animations for each property are doing the exact opposite of each other. What should you expect? Might they just cancel each other out, leaving the moon (our test subject) to remain completely still? No. You see that each animation happens serially, one after the other, such that the moon makes a complete and orderly revolution around the Earth (albeit in a very unnatural square orbit that would have made Kepler’s head explode).

What’s going on? You’ve proven via the console messages that the animations aren’t blocking, yet they execute serially just as if they were (at least with respect to each other). This happens because internally jQuery is queuing up the animations and executing them serially on your behalf.

Refresh the page to clear the console, and click the Animate button three times in succession. (Pause between clicks just long enough to avoid double-clicks.) You’ll note that 15 messages get immediately sent to the console, indicating that your click handler has executed three times, and then sit back as the moon makes three orbits around the Earth. Each of the 12 animations is queued up by jQuery and executed in order because the library maintains a queue on each animated element named fx just for this purpose.

What’s even better is that jQuery makes it possible for you to create your own execution queues, not just for animations but for whatever purposes you want. Let’s learn about that.