jQuery Tutorial

jQuery Queue: queue() Method in jQuery

jQuery queue() Method

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

element to the right before increasing the text's font size:

Example 2

$("button").click(function(){
  var div = $("div");
  div.animate({left: '100px'}, "slow");
  div.animate({fontSize: '3em'}, "slow");
}); 
Did you find this article helpful?