0

div内にあるdiv内にいくつかのdivがあります。次に、最も外側の div が続き、.major_data次に.commitment_boxサブdiv が続き.commitmentます。コミットメントはフェード サイクルにあり、fadeOut()次々と消えていきますfadeIn()。ここで問題が発生します。最後の div の後、fadeOut()最初に表示されません。詳細については、このfiddleを参照してください。

JS:

function tick() {
    var $obj = $(".major_data .commitment_box .commitment");
    $obj.first().delay(1000).fadeOut(function () {
        $obj.first().insertAfter($obj.last());
        tick();
    });
}
tick();

HTML:

<div class="major_data">
    <div class="commitment_box">
        <div class="commitment">
            <p>Alex:</p>
            <p>He's works great.</p>
        </div>
        <div class="commitment">
            <p>Alex 1:</p>
            <p>He's works great.</p>
        </div>
        <div class="commitment">
            <p>Alex 2:</p>
            <p>He's works great.</p>
        </div>
        <div class="commitment">
            <p>Alex 3:</p>
            <p>He's works great.</p>
        </div>
        <div class="commitment">
            <p>Alex 4:</p>
            <p>He's works great.</p>
        </div>
    </div>
</div>

CSS:

.major_data .commitment_box {
    text-align: center;
    height: 40px;
    overflow: hidden;
}
.major_data .commitment_box .commitment p {
    display: inline-block;
}
.major_data .commitment_box .commitment p:first-child {
    font-weight: bold;
    margin-right: 20px;
}

何が問題なのか、フィドルではっきりとわかります。Alex 4...最初のものが出てこない後。

4

1 に答える 1

3

fadeIn()最初の に a を追加するのを忘れましたobj。したがって、1 つのサイクルがなくなった後、それを非表示にすると、すべてのdivs が に設定されdisplay:noneます。あなたのコード:

function tick() {
    var $obj = $(".major_data .commitment_box .commitment");
    $obj.first().fadeIn().delay(1000).fadeOut(function () {
        $obj.first().insertAfter($obj.last());
        tick();
    });
}
tick();

更新されたデモ: http://jsfiddle.net/hungerpain/NMSpx/1/

于 2013-07-14T10:43:38.333 に答える