Here's some code I did for animating images using jQuery:
var enter = 500;
var show = 4000;
var exit = 300;
var direction1 = "right";
var direction2 = "left";
var logo = document.getElementById('Box1').getElementsByTagName('img');
var Num = $('#Box1 img').length;
var time_each = (enter+show+exit);
function startBox1(){
for(x=0;x<=Num-1;x++){
Box1(x);
}
}
function Box1(x){
var buffer = time_each*x;
$(logo[x]).delay(buffer).show("slide", { direction: direction1 }, enter).delay(show).hide("slide", { direction: direction2 }, exit);
}
$(function(){
startBox1();
setInterval("startBox1()",(time_each)*Num);
});
The trick was to set a buffer which equaled the time it took for each animation by the index of the current animation. The FOR
loop runs each code immediately; the .delay()
action and the buffer variable makes it appear as if each animation was happening one after the other. Then setInterval()
recalls the FOR
loop after every animation is complete. It restarts the process continuously.