Question

我需要有三个与淡入淡出过渡交替的元素。我有它在大多数情况下工作，但由于某种原因，当它返回到第一个元素时，它会跳过淡入淡出并出现。我确信这里有一些相当明显的东西，但我只是看不到它。

非常感谢任何帮助。谢谢！

jsfiddle链接： http://jsfiddle.net/hcarleton/qLNyt/

HTML

<body>
    <div id='one' class='selection'>
        <h3>ONE</h3>
    </div>
    <div id='two' class='selection'>
        <h3>TWO</h3>
    </div>
    <div id='three' class='selection'>
        <h3>THREE</h3>
    </div>
    <div id='console'>
    </div>
</body>

CSS

div {
    width:100px;
    height:75px;
    position:absolute;
    top:0px;
    left:0px;
    z-index:10;
}
#one {
    background-color:#aabbcc;
}
#two {
    background-color:#bbccaa;
}
#three {
    background-color:#ccaabb;
}
#console {
    width:500px;
    position:absolute;
    top:200px;
    left:25px;
    background-color:#dddddd;
}
.top {
    z-index:20;
}
p {
    margin:5px;
}

的JavaScript / jQuery的

$(document).ready(function() {
    var fade = 1000;
    var wait = 1000;
    var $selection = $('.selection');
    var selectionQty = $selection.length;
    var c = 0;
    $('.selection').fadeOut(0);
    $('.selection').first().fadeIn(0);
    setInterval(
        function() {
            c+=1;
            if(c == selectionQty) {
                c = 0;
            }
            $selection.eq(c).addClass('top').fadeIn(fade);
            $selection.delay(fade).fadeOut(0).removeClass('top');
            $selection.eq(c).fadeIn(0);
        },
        fade+wait
    );

    $('#console').append('<p>-'+selectionQty+'</p>');
});

Answer 1

您无法使用setInterval()并维护同步事件链。在动画的回调函数中使用setTimeout()。

您有三个动画同时触发。

$selection.eq(c).addClass('top').fadeIn(fade);
$selection.delay(fade).fadeOut(0).removeClass('top');
$selection.eq(c).fadeIn(0);

哪一个完成第一个/最后一个？通常，您需要在最后一个完成时使用setTimeout()（有例外）。

有人可以看一些我遇到问题的jQuery吗？（setInterval，fadeIn / fadeOut）

1 个答案: