Question

I have horizontal menu. It looks like that

<ul>
<li>Sample 1</li>
<li>Sample 2</li>
</ul>

Is there any way to fadein them one by one on page load?

Answer 1

function fadeIn(i, elements, duration, callback){
    if(i >= elements.length)
        $.isFunction(callback) && callback();
    else
        elements.eq(i).fadeIn(duration, function(){
           fadeIn(i+1, elements, duration, callback);
        });        
}

fadeIn(0, $('ul li'), 100, function(){console.log("animation finished!");});

working demo :

http://jsfiddle.net/gion_13/7KQbB/

And of course you can pluginify the code for a more jquery-like synthax:

$.fn.fadeInEach = function(duration,callback){
    function fadeIn(i,elements,duration,callback){
        if(i >= elements.length)
            typeof callback == 'function' && callback();
        else
            elements.eq(i).fadeIn(duration, function(){
               fadeIn(i+1, elements, duration, callback);
            });        
    }
    fadeIn(0, this, duration, callback);
    return this;
} 

Now you can use this plugin exactly as the native fadeIn method :

$('li').fadeInEach(100,function(){alert('animation has finished');});
// if you want to animate all of the elements in the same time use fadeIn : 
// $('li').fadeIn(100,function(){alert('animation has finished');});

The great thing about this approach is that it works on any elements (not only li’s).
Here’s the demo for this little plugin :

http://jsfiddle.net/gion_13/7KQbB/1/