Question

making an infinite loop in javascript, and jQuery…

this is my current code:

$("#bg2").css({"opacity": "0"});

$("#bg3").css({"opacity": "0"});

//

var z = 1;

while(z<1000){


    $("#bg1").animate({"opacity": "1"}, {"duration": (1000)}).delay(6000).animate({"opacity": "0"}, {"duration": (1000)}); 

    $("#bg2").delay(6000).animate({"opacity": "1"}, {"duration": (1000)}).delay(6000).animate({"opacity": "0"}, {"duration": (1000)});

    $("#bg3").delay(12000).animate({"opacity": "1"}, {"duration": (1000)}).delay(6000).animate({"opacity": "0"}, {"duration": (1000)}); 


    z++;

};

Now I don’t know why but the timing stuffs up from the 2nd loop…

---

Essentially this is what I want to do:

1. bg1 is already faded in, it must stay for 6 seconds before fading out over 1 second

2. while bg 1 is fading out, bg 2 must fade in and then stay for 6 seconds, then fade out over 1 second

3. while bg 2 is fading out, bg 3 must fade in and stay for 6 seconds before fading out

4. as bg 3 fades out, bg 1 fades back in

then the loop must continue forever…

how should I do this?

Answer 1

Maybe using a jQuery Queue would help.