jQuery Show one element at a time?

Question

I have a list that has indexed classes - what would be the best way to show these one at a time upon fadeIn of the container div?

Answer 1

function fade_in_recursive(e,duration,callback)
{
    $(e).fadeIn(duration,function()
    {
        if($(e).next().length == 0)
        {
            if(typeof(callback) == 'function')
            {
                callback();
            }
            return;
        }
        else
        {
            // Apply recursion for every sibling.
            fade_in_recursive($(e).next(),duration,callback);
        }
    });

} // End fade_in_recursive

$(function()
{
    fade_in_recursive($('ul li:first-child'),500);
});

http://jsfiddle.net/2s4L8/

Answer 2

Give them a common class, and do the fadeIn()[docs] in a loop using the each()[docs] method while delaying each one with the delay()[docs] method for a given duration multiplied by the index of the loop.

$('li.someClass').hide().each(function( i ) {
    $(this).delay( i * 400 ).fadeIn();
});

Each element will begin 400 milliseconds later than the previous.

Example: http://jsfiddle.net/4ANCj/