javascript - Jquery:顺序淡入、淡出列表和循环

Question

这是 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>

Js:

$(function() {
     setInterval(function () {
      $('#fds li').each(function (i) {

    $(this).delay((i++) * 1000).fadeTo(2000, 1); 
    $(this).delay((i++) * 1000).fadeOut(2000);
    });
}, 10000);
});

CSS:

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

项目应该一个接一个地出现，直到列表完成，经过相当长的延迟后，项目应该从一开始就一个接一个地淡出，最后应该有一个相当长的停顿。我的代码淡出问题很快，循环间隔与淡入和淡出时间和结果之间的恐惧是困惑的。

Answer 1

尝试

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();

演示:Fiddle