JQuery, do a loop with simple animation

Question

I am trying to make a replacement for a flash movie.

the animation is really simple, the background image slides left for 10 seconds. Meanwhile, the product is displayed with its name.

I was able to recreate the animation using jquery .. it works fine .. BUT ONLY ONE! T_T

Does anyone know how I can do this in a loop?

this is 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. }; 

sync function:

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

I tried to clear setTimeout .. obviously with success .. so if you guys know how the hell I can do an infinite loop with these functions (first, second, third ... etc) i 'all ears.

thanks!!

Answer 1

Try the following:

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

See Javascript Sync Events .

Answer 2

Each trigger function has the following, using the callback parameter!

Answer 3

Wrap your animation code in a function and set a timer for yourself at the end. Sort of:

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