javascript - jquery 动画每个列表项

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 增加到其他值。