jquery - 将动画顺序添加到 animate.css

Question

我想在使用 animate.css 时在每个动画之间添加一个延迟，以便它们按顺序进行动画处理。例如，northernlighting.no(菜单项)。

问题是我不知道如何为每个元素设置动画而不是为整个列表设置动画。

Answer 1

jQuery 可以做到这一点。

确保你有一个“隐藏”类分配给你正在制作的任何动画。

.hidden {
    display: none;
}

你的 HTML 应该是这样的

<ul>
    <li id="content1" class="hidden">
    <li id="content2" class="hidden">
    <li id="content3" class="hidden">
</ul>

jQuery 就是这样

$(document).ready(function () {
    $("#content1").removeClass("hidden");
    $("#content1").addClass("animated fadeIn");
    $("#content2").delay("slow").removeClass("hidden");
    $("#content2").addClass("animated fadeIn");
    $("#content3").delay("slow").removeClass("hidden");
    $("#content3").addClass("animated fadeIn");
});