Question

我有这个列表，我希望为每个列表项设置动画，基本上每个项目都会向上移动几厘米的级联效果。

我已创建此代码以实现此目的，但它似乎是通过整个列表而不是单个列表项的动画。

JS - jquery

$("#energy_guide ul").animate({"top" : "+=20px"}, "fast");

和HTML

<ul class="guide-block-list us-list" id="energy_guide">
    <li>
        <a href="#">Item 1</a>
    </li>

    <li>
        <a href="#">Item 2</a>
    </li>
</ul>

你们对我如何实现这个目的有什么建议吗？

由于

Answer 1

此代码可以满足您的需求。

var delay_time = 0;
$("#energy_guide ul li").each(function() {
    $(this).delay(delay_time).animate({"top" : "+=20px"}, "fast");
    delay_time += 200;
});

循环遍历每个li。第一个li的延迟为0，第二个延迟为200毫秒，第三个延迟为400毫秒，依此类推。所以它会在不同的时间，彼此之后激活它们。如果您希望它更快/更慢，请随意更改延迟时间并从200增加到其他值。

jquery为每个列表项设置动画

1 个答案: