Shortening Script - Add new class/css to an li in setIntervals

Question

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); 
}

Answer 1

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<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<5;j++){ //5 is the number of lis
 $el.queue(myAnimEffect).delay(300);
 } 
});

• papirtiger: Why not chain .addClass to avoid re-querying?

Answer 2

If I am getting you right, you are looking for something like:

var titles=$("ul").children();
function fadeInTitles(titles, timeOut){
 var timeOut=timeOut || 1500;
 var len=titles.length, currentItem=0;
 function showTitle(){
 $(titles[currentItem]).fadeIn("slow");
 currentItem+=1;
 if(currentItem<len) setTimeout(showTitle, timeOut);
 }
 showTitle();
}
fadeInTitles(titles);

Play with me on jsFiddle.