JQuery fade with loop and delay

Question

I have 2 Divs stacked on top of each other.

I need a really simple function that will:

a) Wait for 3 seconds and then b) FadeOut the top Div to reveal the se

Answer 1

if the two divs have ids of "id1" and "id2", and id2 is the upper one then the code would be like:

function fadeIn() {
  $("id2").animate({opacity:0},500);
  setTimeout(fadeOut,3500);
}

function fadeOut() {
  $("id2").animate({opacity:1},500);
  setTimeout(fadeIn,3500);
}

function startAnim() {
  setTimeout(fadeIn,3000);
}

startAnim() starts the animation cycle , which you should call @ the start. Then fadeIn & Out keep animating id2 and setting timeouts for each other. The delay is 3500 , as you wanted 3 seconds of delay (ie. 3000ms) and 500 for the previous animation to complete. This could have been done using a callback on animate , but that's more messy.