Sliding Up <p>s

Question

I have a simple problem which I am not able to solve properly. I have some divs having 2 <p>s each. The <p>s inside them are displayed display:inline. I want those both <p>s to slide up every 2 seconds and then make the next <div>'s <p> come up. That's somewhat hard to describe. It just like a scrolling up <marquee> but having a delay in between.

So here's the 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>

I am I am clear. Thanks for any help :)

Answer 1

I did something like this:

$(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/

Answer 2

You can use delay() for it. You need a counter, to get the total wiating time for every element. Your code is to complicated. You should use the .each()-Function for it. check this:

$(document).ready(function () {
   i = 1
    $(".commitment").each(function(){
        $(this).delay(2000 * i).animate({marginTop: "-=40px"});
        i++;
    });
});

Updated fiddle: http://jsfiddle.net/w4XMs/1/