Question

I want to increase/decrease the font of and element, then the next element of that class and so forth, for a set of elements as <div class="test"></div> <div class="test"></div> ..... I mean

step 1: enlarging the first element and returning to normal size
step 2: enlarging the second element and returning to normal size
....

My basic code is

$(document).ready(function() {
    $('.test').animate({
               left:50,
               fontSize: "2em"},
               "slow")
               .animate({
               left:-50,
               fontSize: "1em"},
               "slow");

This will affect all the elements at once. How can I make a queue to make the changes one by one. Having one enlarged element at a time.

Answer 1

You could do it with

$('.test').each(function(idx){
    var duration = 1200; // duration for all animations (2 x slow)
    $(this)
         .delay(duration*idx)
         .animate({ left:50, fontSize: "2em" }, 'slow')
         .animate({ left:-50, fontSize: "1em" }, 'slow');
});

Demo at http://jsfiddle.net/gaby/rz5Es/

---

For more precise control and more freedom on queuing look at my answer at a similar question:
A non-nested animation sequence in jQuery?