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>

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

在列表完成之前，项目应一个接一个地出现，经过相当长时间的延迟后，项目应从一开始逐渐淡出，最后应有相当大的停顿。我的代码淡出问题很快，并且循环间隔使人担心淡入和淡出时序，结果是混乱的。

最佳答案

尝试

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

关于javascript - jQuery:顺序淡入，淡出列表并循环，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20063303/