0

我有一个简单的问题，我无法正确解决。我有一些 div<p>每个都有 2 秒。显示其中的<p>s display:inline。我希望这两个<p>s 每 2 秒向上滑动一次，然后让下一个<div>s<p>出现。这有点难以描述。它就像向上滚动，<marquee>但在两者之间有延迟。

所以这是小提琴。

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>

我是我很清楚。谢谢你的帮助 ：）

4

2 回答 2

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/

于 2013-07-12T13:08:42.593 回答
0

您可以使用 delay() 。您需要一个计数器来获取每个元素的总等待时间。你的代码太复杂了。您应该为此使用.each()-Function。检查这个：

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

更新小提琴：http: //jsfiddle.net/w4XMs/1/

于 2013-07-12T13:04:18.717 回答