Jquery, make a loop with a simple animation

Question

hello guys.. i'm trying to make a replacement for a flash movie.

the animation is really simple, background image slide to the left for 10 seconds.. meanwhile a product is shown with his name.

i was able to recreate the animation with jquery.. it works perfec.. BUT JUST ONCE! T_T

does anybody know how can i make it to loop?

this is the code

function first() {
    $(".img1").animate({left: "-214"}, 10000);
    $(".img2").hide();
    // i hide everything        
};

function second() { 
    $(".img2").fadeIn("slow");
    $(".img1").fadeOut("slow");
    $(".img2").animate({left: "-214"}, 10000);
    // other div animations.. fades in.. slides.. etc.
};

the timing function is:

$(function() {  
    setTimeout("first()",0);
    setTimeout("second()",10000);
    setTimeout("third()",20000);
    setTimeout("fourth()",30000);
    setTimeout("fifth()",40000);        
});

i tried clearing the setTimeout.. obviously withouth success.. so if you guys have any clue how the hell can i make an infinite loop with those functions (first, second, third.. and so on..) i'm all ears.

thanks!!

Answer 1

Have each function trigger the next using the callback parameter!

Answer 2

Try this:

...
function doAnimation() {
    setTimeout("first()",0);
    setTimeout("second()",10000);
    setTimeout("third()",20000);
    setTimeout("fourth()",30000);
    setTimeout("fifth()",40000);  
}

$(document).ready() {
    setInterval("doAnimation()", 5000);
});

See Javascript timing events.

Answer 3

Wrap your animation code in a function, and have it set a timer for itself at the end. Something like:

function doAnimation() {
    setTimeout("first()",0);
    setTimeout("second()",10000);
    setTimeout("third()",20000);
    setTimeout("fourth()",30000);
    setTimeout("fifth()",40000);
    setTimeout("doAnimation()", 50000);
}