Question

What I’d like to do is iterate through a navigation’s list items, and fade each element in, sequentially, but with the flexibility of having two delay options: the option to wait for each previous animation to complete before proceeding with the next animation, and/or a custom delay/timeout (milliseconds) between the start of each animation (not a delay between the end of one animation and the start of the next animation).

Naturally, I could use nested callbacks and call each list item specifically, but that’s rather inefficient code-wise, and would only load each element one-after-another, which is okay in some cases, but in others I might want to have them load nearly simultaneously, with a possible slight delay (to emulate some of the Flash based navigations I’ve seen). Hense why I say that the custom delay option should be between the start of one, and the start of the next.

For what it’s worth, the navigation elements are first being hidden via $('#nav li').hide(); but I suspect you already guessed that might be the case. 🙂

How might this sort of effect be accomplished?

Answer 1

$('#nav li').each(function(index, element) {
    $(element).delay(index*50).fadeIn(400); // delays each subsequent fade by 50ms.
    // Change 50 to match the duration of the fade and they will fade in one after the other.
});