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

Answer 2

有点奇怪的方式，没有回调。但仍然有效。

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

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

2 个答案: