JQuery - add effects to elements in a specific order

Question

Hello pros from Stackoverflow, I have multiple span elements for which I need to add jquery effects in some order of the elements. I have written a primitive way to do that (like here: JSfiddle).

This is HTML:

<div class="content">
  <span id="zoom-1" class="bold">ZOOMING 1</span>
  <span id="zoom-2" class="highlight-blue">ZOOMING 2</span>
  <span id="zoom-3">ZOOMING 3</span>
</div>
<div class="content">
  <span id="zoom-4" class="highlight-grey">ZOOMING 4</span>
  <span id="zoom-5">ZOOMING 5</span>
  <span id="zoom-6" class="highlight-red bold">ZOOMING 6</span>
</div>

CSS:

.content {
  position:relative;
  color:#000;
  line-height:50px;}
#zoom-1, #zoom-2, #zoom-3, #zoom-4, #zoom-5, #zoom-6 {
  position:relative;
  margin:0 auto;
  font-size:0;
  line-height:0;
}
.bold {font-weight:bold;}
.highlight-red {color:red;}
.highlight-blue {color:blue;}
.highlight-grey {color:grey}
.size-10 {font-size:10px;}
.size-20 {font-size:20px;}
.size-30 {font-size:30px;}

JS:

jQuery(document).ready(function(){
    $('#zoom-1').animate({
        'font-size':'10px'
    }, 500,function(){
        $('#zoom-2').animate({
            'font-size':'30px'
        },500,function(){
            $('#zoom-3').animate({
                'font-size':'20px'
            },500,function(){
                $('#zoom-4').animate({
                    'font-size':'20px'
                },500,function(){
                    $('#zoom-5').animate({
                        'font-size':'10px'
                    },500,function(){
                        $('#zoom-6').animate({
                            'font-size':'30px'
                        },500);
                    });
                });
            });
        });
    });
});

But as you see, this is a difficult to implement for more than 3 elements this way.
I have defined classes .bold, .highlights and .sizes as future properties for elements and I have tried with .animate() in combination with .addClass() but without success.
Since I have to "animate" more than 20 elements with custom properties for each, can you help me with an advanced but easier to implement solution? I'm looking for a solution IE8+ compatible.
Thank you in advance.

Answer 1

Iterate through the items, read their classes and edit their appearance/animate them accordingly. For example here is a rework of your current snippet:

jQuery(document).ready(function(){
    var animCounter = 0;
    $("span").each(function(){
        var spanClasses = $(this).attr('class');
        if (spanClasses.indexOf('size-')!=-1){
            var size =  spanClasses.substring( spanClasses.indexOf('size-')+5 );
            $(this).delay(animCounter * 500).animate({'font-size':size+'px'},500);
            animCounter++;
        }
    });
});

jsfiddle Demo

This function will go through all of your spans, check if they have a size-... class. If an element does have it - it will take the number after that and use it as a size parameter (also removing the need of the css classes).

Note that there is a delay counter, appended to each animation, so that each element will be animated at the right time.

You can do the same with color classes etc. Also you should probably rework the parsing of properties from the class name (10 out of span-10) using regex. The current code may break if there are other classes after the span property.

Update

Here is an example using regex to parse parameter from a class attribute:

var size = spanClasses.match(/size-\d*/)[0].substring(5);

jsfiddle Demo 2

Hope this helps!

Answer 2

You can use delay method to delay the elements with the time amount which is taken by previous animations, although there are many other properties which provide you the way to queue your animation , but simply you can create a variable which will be incremented by 500 with each animation you add. and as below you can do the same what you were trying

jQuery(document).ready(function()
    {
        var time=0;
        $('#zoom-1').animate({'font-size':'10px'}, 500);time+=500; //or the amount
        $('#zoom-2').delay(time).animate({'font-size':'30px'},500);time+=500; //or the amount
        $('#zoom-3').delay(time).animate({'font-size':'20px'},500);time+=500; //or the amount
        $('#zoom-4').delay(time).animate({'font-size':'20px'},500);time+=500; //or the amount
        $('#zoom-5').delay(time).animate({'font-size':'10px'},500);time+=500; //or the amount
        $('#zoom-6').delay(time).animate({'font-size':'30px'},500);

   });