Question

I have a few divs that I want to animate using jQuery. However, I want to start animating the next div when animation of the previous div is midway. Please help how to get the desired effect. I have the following code but it does not work :

$("#box1").animate({opacity:0},{ duration: 800 }).delay(400).animate({opacity:1},{duration: 800 });
    $("#box2").animate({opacity:0},{ duration: 800 }).delay(400).animate({opacity:1},{duration: 800 });
    $("#box3").animate({opacity:0},{ duration: 800 }).delay(400).animate({opacity:1},{duration: 800 });
    $("#box4").animate({opacity:0},{ duration: 800 }).delay(400).animate({opacity:1},{duration: 800 });

Answer 1

You could add a delay to the second div:

$('div#first_div').animate({...}, 1000);
$('div#second_div').delay(500).animate({...}, 1000);

Edit: I see that you added some code to your question, but I am not sure when exactly you want the next div to start.

The important point is that each of the four lines start at the same time, so you will get your desired result by adding an incresing delay at the beginning of each line.

In this code, for example, the boxes will start to fade out when the previous box is in the middle of fading out:

$("#box1").fadeOut(800).delay(400).fadeIn(800);
$("#box2").delay(400).fadeOut(800).delay(400).fadeIn(800);
$("#box3").delay(800).fadeOut(800).delay(400).fadeIn(800);
$("#box4").delay(1200).fadeOut(800).delay(400).fadeIn(800);

(Also notice that you in simple animations could use fadeIn/fadeOut instead of the animate method.)