How to write a loop in jQuery which waits for each function to complete before continuing the loop

Question

Please forgive me if this is an obvious one.

I have an unknown amount of elements on a page, which I need to loop through one at a time and do stuff to. However, I need the loop to pause until the functions used on the elements have completed, and then continue on to the next iteration.

I tried doing this in a $.each loop, but it fired off the commands far to quickly and finished without waiting for them to complete.

Any ideas?

$('elem').each(function(){
    $(this).fadeIn().wait(5000).fadeOut();
});

This is what I have, very simple. I got the wait() function from here: jquery cookbook site.

Problem is, the loop doesnt wait - the actual command works as intended, it's just that they all go off at once.

Any help appreciated, thanks.

EDIT: After this is executed, I may want to then execute the loop again, so that the list of elems will be faded in / out again in sequence

EDIT2: Have since gotten the 1.4.2 jQuery lib, was using 1.3.2, hence the custom wait() function. Now using delay() as mentioned by lobstrosity. Managed to cobble together something close to what I need from his answer, thanks lobstrosity :) .

Answer 1

First of all, jQuery 1.4 added the delay function, which I assume is what your custom wait implementation is doing.

Using delay, you can sort of fake the functionality of each element "waiting" on the previous element to finish by using the first parameter to the each callback as a multiplier for an intial delay. Like this:

var duration = 5000;

$('elem').each(function(n) {
    $(this).delay(n * duration).fadeIn().delay(duration).fadeOut();
});

So the first element will fadeIn immediately. The second will fadeIn after 5,000 ms. The third after 10,000 ms and so on. Keep in mind that this is faking it. Each element is not actually waiting on the previous element to finish.