jQuery Queue: queue() Method in jQuery

jQuery includes animation queue capabilities by default.

If you write numerous animation() calls in a row, jQuery will establish an "internal" queue with them. The animated calls are then executed one by one.

So, if you want to do multiple animations after each other, you can use the queue feature:

Example 1

$("button").click(function(){
  var div = $("div");
  div.animate({height: '300px', opacity: '0.4'}, "slow");
  div.animate({width: '300px', opacity: '0.8'}, "slow");
  div.animate({height: '100px', opacity: '0.4'}, "slow");
  div.animate({width: '100px', opacity: '0.8'}, "slow");
}); 

The following example shifts the

Example 2

$("button").click(function(){
  var div = $("div");
  div.animate({left: '100px'}, "slow");
  div.animate({fontSize: '3em'}, "slow");
});