Need delay in for loop for animated sequence.
On this page
http://yourpts.com/joe/index5.html I've got three images floating onto the screen when you click the word "test" in the middle. It's a good start, but I need them to come onto the screen one at a time. Instead they're all overlapping. Here's the javascript code for it:
-
$(document).ready(function() {
var flyingPic = $("#flyingPics img");
function startPic(theImg) {
$(theImg).animate({width:"300px"}, {queue:false, easing:"swing", duration:2500})
.animate({left:"150%"}, {easing:"linear", duration:4000})
.animate({left:"-1500px", width:"1000px"}, {duration:0});
};
$("#go").click(function() {
for (var i = 0; i < flyingPic.length; i++) {
startPic(flyingPic[i]);
};
});
});
I tried variations of setTimeout and setInterval in the for loop and tested with alert messages as shown below:
-
$("#go").click(function() {
for (var i = 0; i < flyingPic.length; i++) {
setTimeout(startPic(flyingPic[i]), 5000);
alert("WORK!");
};
});
The startPic() is executed once, but everything after that is aborted including any further iterations of the for loop.
Can anyone tell me what I'm missing or if there is an easier way?