每個 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");
})