jquery - Divs 上的淡入淡出循环

Question

我在一个 div 中的 div 中有一些 div。.major_data然后是最外层的 div .commitment_box，然后是子 div .commitment。承诺处于一个褪色周期中，因此一个fadeOut()又一个fadeIn()。问题来了，在最后一个 div 是fadeOut()第一个之后不要出现。有关更多间隙，请参阅this 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...第一个不出现之后。

Answer 1

您忘记fadeIn()在第一个obj. 因此，在一个周期结束后，您将其隐藏起来，您的所有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/