每个 li 元素的不同动画延迟

Question

我想为每个 li 元素设置不同的动画延迟。 从 0 开始增加 0.25s

const $li = [$("div.navigation li")];
let $navLoadingTime = $("div.navigation li").css("animation-duration");

$(document).ready(function () {
    // steps loading
    const $liLength = $li[0].length;
    const $delay = $navLoadingTime.replace("s", "");

    for (var i = 0; i < $li[0].length;) {
        i++
        $li[0].css("animation-delay", $delay * i + "s")
    }
})

到目前为止，我已经创建了类似上面的东西。 几乎没问题。 但是，它将 i 增加到最大值并为所有 li 元素设置相同的最大延迟值。 我该如何解决？

Answer 1

您正在该集合中的所有<li>上执行 css()，使用eq()隔离各个元素对象

尝试

for (var i = 0; i < $li[0].length;) {            
     $li[0].eq(i).css("animation-delay", $delay * i+1 + "s");
     i++
}

或者使用each()

$li[0].each(function(i){
   $(this).css("animation-delay", $delay * i+1 + "s");
})