1

我需要三个与淡入淡出交替交替的元素。我让它大部分工作，但由于某种原因，当它返回到第一个元素时，它会跳过淡入淡出并出现。我敢肯定，我在这里遗漏了一些相当明显的东西，但我只是没有看到。

任何帮助将不胜感激。谢谢！

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>');
});
4

1 回答 1

2

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

您有三个动画同时触发。

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

哪个先完成/最后完成？通常，您会希望setTimeout()在最后一个完成时使用（有例外）。

于 2013-03-12T16:49:32.017 回答