Jquery 每个列表项的关键帧动画延迟？

快乐东方

我正在使用Javascript和Jake Weary在我的页面上填充和显示一个无序列表。 首先使用for循环将包含内容的li推送到数组中，然后：

var join = array.join("");
$("#list_view").html("<ul>"+join+"</ul>");
$("#list_view").show();
$("#list_view > ul > li").addClass("list_flip");

这工作得很好，但我希望在每个li“启动”之间有一个小的延迟，而不是同时启动所有li

每次列表长度可能不同，因此我无法直接在CSS中处理列表项

---

感谢您的帮助

您需要遍历所有列表项，并将其索引用作延迟变量：

$("#list_view > ul > li").each(function(idx,value){
    $(this).addClass("list_flip");
    $(this).css({
        "-webkit-animation-delay":idx+"s",
        "-moz-animation-delay":idx+"s",
        "-ms-animation-delay":idx+"s",
        "-o-animation-delay":idx+"s",
        "animation-delay":idx+"s"
    });
});

以下是一个例子：

$("#list_view > ul > li").each(function(idx,value){
    $(this).addClass("list_flip");
    $(this).css({
        "-webkit-animation-delay":idx+"s",
        "-moz-animation-delay":idx+"s",
        "-ms-animation-delay":idx+"s",
        "-o-animation-delay":idx+"s",
        "animation-delay":idx+"s"
    });
});