1

フェード トランジションと交互になる 3 つの要素が必要です。ほとんどの場合は機能していますが、何らかの理由で最初の要素に戻ると、フェードをスキップして表示されます。ここに欠けているのはかなり明白なものがあると確信していますが、それがわかりません。

どんな助けでも大歓迎です。ありがとう！

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()アニメーションのコールバック関数内で使用します。

3 つのアニメーションが同時にトリガーされます。

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

どちらが最初/最後に終了しますか? 通常、最後の 1 つが終了したときに使用しますsetTimeout()(例外があります)。

于 2013-03-12T16:49:32.017 に答える