Javascript 淡入<；李>；逐项

我有水平菜单。看起来是这样的

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

样本1
样本2

有没有办法在页面加载时一个一个地将它们淡入淡出

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

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

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

}))

工作演示： 当然，您可以为更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');});

这种方法的优点在于，它适用于任何元素（不仅仅是李的元素）。

---

下面是这个小插件的演示：

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

例如：

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

var count=$（'li'）。长度；
var start=0；
函数序列（）{
$（'li'）.eq（start）.fadeIn（1000，function（）{
启动++；
如果（开始），您可以使用css动画处理动画/fadein部分：


加成
JQuery
这样，它们将同时消失。
var count = $('li').length;
var start = 0;
function sequence(){
$('li').eq(start).fadeIn(1000,function(){
    start++;
    if(start<count) sequence();
});
}
sequence();

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

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; }
}

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