jquery - 向上滑动

Question

我有一个简单的问题，我无法正确解决。我有一些 div 有 2 <p>每个。 <p>显示里面的 s display:inline .我想要那些<p> s每2秒向上滑动一次，然后进行下一个<div>的 <p>过来。这有点难以描述。就像向上滚动一样 <marquee>但中间有延迟。

所以这是 fiddle .

JS:

$(document).ready(function () {
    var i = 1;
    $(".major_data .commitment_box .commitment").each(function () {
        $(this).attr("id", i);
        i++;
    });

    for (var j = 0; j <= $(".major_data .commitment_box .commitment").length; j++) {
        if ($(".major_data .commitment_box .commitment").prop("id") == j) {
            $(".major_data .commitment_box .commitment").animate({
                marginTop: "-=40px"
            });
        }
    }
});

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;
}

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>

我很清楚。感谢您的帮助:)

Answer 1

我做了这样的事情:

$(document).ready(function () {
    function tick(){
        var $obj = $(".major_data .commitment_box .commitment");
        $obj.first().animate({
            'margin-top': "-=40"
        }, 1000, "linear", function() {
            setTimeout(function(){
                $obj.first().css("margin-top", "0").insertAfter($obj.last());
                tick()
            }, 1000);
        });    
    }    
    tick();
});

http://jsfiddle.net/w4XMs/8/