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

Question

I want to set different animation-delay for each li element. Starting from 0 and increasing of 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")
    }
})

So far I have created something like above. it is almost ok. However, it increases i into the maximum and sets the same maximum delay value for all of the li elements. How can I resolve it?

Answer 1

You are doing css() on all the <li> in that collection, isolate the individual element objects with eq()

Try

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

Or using each()

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