逐个淡入<li>项目

Question

我有水平菜单.它看起来像那样

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

有没有办法在页面加载时逐个淡化它们？

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!");});

工作演示:

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

当然,你可以为更像jquery的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;
} 

现在,您可以将此插件完全用作本机fadeIn方法:

$('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');});

这种方法的好处在于它适用于任何元素(不仅仅是li).
这是这个小插件的演示:

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