Shortening Script - Add new class/css to an li in setIntervals I am currently working on a site where I have a bunch of tiles "fly in" to the screen.  I need to add a class to each tile on a delay so they come in one after another.  I have the following code that works, but if I want to add more tiles, I will have to edit the jQuery each time.

Is there a way to trim this script down so I don't have to manually add new animations to the new tiles?

function tilesAnimation() {

    setInterval(function () {
        $("ul.homepageTabs li").eq(0).css("display", "inline-block");
        $("ul.homepageTabs li").eq(0).addClass('animated fadeInDown');
        $(".loader").fadeOut();
    }, 1800);
    setInterval(function () {
        $("ul.homepageTabs li").eq(1).css("display", "inline-block");
        $("ul.homepageTabs li").eq(1).addClass('animated fadeInDown');
    }, 2100);
    setTimeout(function () {
        $("ul.homepageTabs li").eq(2).css("display", "inline-block");
        $("ul.homepageTabs li").eq(2).addClass('animated fadeInDown');
    }, 2400);
    setTimeout(function () {
        $("ul.homepageTabs li").eq(3).css("display", "inline-block");
        $("ul.homepageTabs li").eq(3).addClass('animated fadeInDown');
    }, 2700);
    setTimeout(function () {
        $("ul.homepageTabs li").eq(4).css("display", "inline-block");
        $("ul.homepageTabs li").eq(4).addClass('animated fadeInDown');
    }, 3000);
    setTimeout(function () {
        $("ul.homepageTabs li").eq(5).css("display", "inline-block");
        $("ul.homepageTabs li").eq(5).addClass('animated fadeInDown');
    }, 3300);
    setTimeout(function () {
        $("ul.homepageTabs li").eq(6).css("display", "inline-block");
        $("ul.homepageTabs li").eq(6).addClass('animated fadeInDown');
    }, 3600);
    setTimeout(function () {
        $("ul.homepageTabs li").eq(7).css("display", "inline-block");
        $("ul.homepageTabs li").eq(7).addClass('animated fadeInDown');
    }, 3900);
    setTimeout(function () {
        $("ul.homepageTabs li").eq(8).css("display", "inline-block");
        $("ul.homepageTabs li").eq(8).addClass('animated fadeInDown');
    }, 4200);            

}
One simple solution would be to extract your common functionality into a method. We'll also cache the selector for speed (don't do this if the elements change).

var tabs = $("ul.homepageTabs li");

function animateAfter(index,timeout){

    setTimeout(function () {
        tabs.eq(index).css("display", "inline-block");
        tabs.eq(index).addClass('animated fadeInDown');
    }, timeout);      
}


Then we can call it like so:

for(var i=3;i&lt;8;i++){
   animateAfter(i,2400+300*i);
}


I noticed the first two are intervals, was that a mistake? If it was, you can start the loop at 0 (and a smaller timeout). If it wasn't you can can create a similar function for intervals.

Also, consider using queued animations. 

We want all our animations to occur 300 mili-seconds (after each other) right?

(function(){
    var i=3; //the start index

    function myAnimEffect(next){
        $(this).eq(i).css("display", "inline-block").
               eq(i).addClass('animated fadeInDown');
       next();
    }
    var $el = $('ul.homepageTabs li');         
    $el.delay(1800);
    for(var j=0;j&lt;5;j++){ //5 is the number of lis
        $el.queue(myAnimEffect).delay(300);
    } 
});