我有一个简单的问题,我无法正确解决。我有一些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;
}
我很清楚。感谢您的帮助:))
答案 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();
});
答案 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/