Javascript Jquery：顺序淡入淡出列表和循环

以下是html：

<ul class="uii" id="fds">

    <li class="lii">One</li>

    <li class="lii">Two</li>

    <li class="lii">Three</li>

    <li class="lii">Four</li>

</ul>

css:

---

项目应该一个接一个地出现，直到列表完成，经过相当长的延迟后，项目应该从一开始就一个接一个地淡出，并且在结束时应该有相当大的停顿。我的代码淡出的问题是快速循环间隔和淡出时间，结果是混乱

有点奇怪，没有回调。不过仍然有效

var lis = $('li');
for(var i=0;i<=lis.length;i++) {
    var timer = setTimeout(function(){
        $(lis[i]).fadeTo(2000, 1); 
    },4000*i);
}
var waiting = setTimeout(function(){
    for(var i=0;i<=lis.length;i++) {
        var timer = setTimeout(function(){
            $(lis[i]).fadeTo(2000, 0); 
        },4000*i);
    }
},4000*i + 4000);

var lis=$（'li'）；
对于（var i=0；iTry

演示：
提供fiddle pls……
回调将是一个正确的选择，我认为是这样。+1很好的方法，如果您在代码中添加一些解释就好了：）
.uii {
    margin-top: 10px;
    margin-right: 10px;
    float: right;
    font-size: 50px;
    width: 40%;

}

.uii li { opacity: 0; list-style: none; }

.lii {
    padding: 35px;
    margin-bottom: 10px;
    z-index: 1000;
    position: auto;
    background: #CBBFAE;
    background: rgba(190,176,155, 0.4);
    border-left: 4px solid rgba(255,255,255,0.7);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);   
    opacity: 0;
    color: #fff;

    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -o-transition: all 200ms;
    -ms-transition: all 200ms;
    transition: all 200ms;
}

var lis = $('li');
for(var i=0;i<=lis.length;i++) {
    var timer = setTimeout(function(){
        $(lis[i]).fadeTo(2000, 1); 
    },4000*i);
}
var waiting = setTimeout(function(){
    for(var i=0;i<=lis.length;i++) {
        var timer = setTimeout(function(){
            $(lis[i]).fadeTo(2000, 0); 
        },4000*i);
    }
},4000*i + 4000);

function animate() {
    function fadeTo(lis, duration, opacity, callback) {
        if (!lis.length) {
            callback();
        }

        var $lis = $(lis.shift());
        $lis.delay(1000).fadeTo(duration, opacity, function () {
            fadeTo(lis, duration, opacity, callback);
        })
    }

    fadeTo($('#fds li').get(), 500, 1, function () {
        setTimeout(function () {
            fadeTo($('#fds li').get(), 500, 0, function () {
                setTimeout(animate, 5000);
            })
        }, 5000);
    })

}

animate();