向上滑动<p> s </p>

时间:2013-07-12 12:45:38

标签: jquery html css css3 marquee

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

所以这是fiddle

JS:

<marquee>

CSS:

$(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"
            });
        }
    }
});

HTML:

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

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

2 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

你可以使用delay()。你需要一个计数器,以获得每个元素的总时间。 你的代码很复杂。你应该使用.each() - 函数。 检查一下:

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

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