Simultaneous versus Queued Effects

The .animate method, as we’ve just discovered, is very useful for creating simultaneous effects in a particular set of elements. There may be times, however, when we want to queue our effects, having them occur one after the other.

Working with a Single Set of Elements

When applying multiple effects to the same set of elements, queuing is easily achieved by chaining those effects. To demonstrate this queuing, let’s take another look at our simpler example of moving the switcher buttons to the right and enlarging them:

$(document).ready(function() {
  $('div.label').click(function() {
    $('div.button').animate({left: 650, height: 38}, 'slow');
  });
});

As we’ve already noted, the two animations—left:650 and height:38—occur virtually simultaneously. To queue these effects, we simply chain them instead:

$(document).ready(function() {
  $('div.label').click(function() {
    $('div.button')
      .animate({left: 650}, 'slow')
.animate({height: 38}, 'slow');
 ...