逐个淡入<li>项目</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/

Answer 2

$("li").each(function(i) {
    $(this).delay(500*i).fadeIn();
});

Answer 3

这样的东西？

jQuery(document).ready() {
    $('ul li').hide(); 

    $('ul li').each(function(index) {
        $(this).delay(50*index).fadeIn(200);
    });

}）;

Answer 4

对于它的价值，您可以使用css动画处理动画/ fadein部分：

<强> FIDDLE

标记

<ul class="myList">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    ...
</ul>

CSS

li
{
    width: 100px;
    height: 100px;
    display: inline-block;
    background: pink;
    margin-bottom: 10px;
}

.myList li {
    opacity: 0;
    position: relative;
    animation: fadeIn 600ms ease both;
    animation-play-state: paused;
}

.myList.play li {
    animation-play-state: running;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

JQuery的

$(".myList li").each(function (i) {
    $(this).attr("style", "-webkit-animation-delay:" + i * 200 + "ms;"
                 + "-moz-animation-delay:" + i * 200 + "ms;"
                 + "-o-animation-delay:" + i * 200 + "ms;"
                 + "animation-delay:" + i * 200 + "ms;");
    if (i == $(".myList li").size() -1) {
        $(".myList").addClass("play")
    }
});

Answer 5

如果你想确保它们一个接一个地出现，你可以在fadeIn效果中使用回调函数：

例如：

var count = $('li').length;
var start = 0;
function sequence(){
$('li').eq(start).fadeIn(1000,function(){
    start++;
    if(start<count) sequence();
});
}
sequence();

见work。