jQuery: Using a Time Delay in an Each Iterator?

Question

I'm trying to create a carousel effect that automatically cycles through each pictures every 3 seconds.

    $(".headline_img").each(function(intIndex){
        setTimeout($(this).show(),3000);
    });

The timeout delay is not working.

This shows all of the images instantly as soon as the dom loads. It's like its ignoring the setTimeout function.

Did I miss something?

Note: I'm calling this using $(document).ready, do you think that might effect it?

Answer 1

You need to change the timeout for each one. Right now, you're attaching the same timeout to all of them at the same time. Something like this should work without changing your code much:

$(".headline_img").each(function(intIndex){
    setTimeout($(this).show(),3000 * (intIndex +1));
});

Refactoring to use queue might be more robust in the long term.

Answer 2

The setTimeout function takes a function reference or a string. Your code calls the show method for each element immediately. I'm not sure if this will work:

$(".headline_img").each(function(intIndex){
    setTimeout($(this).show, 3000);
});

but it's worth a try...