将动画顺序添加到 animate.css

【问题标题】：Add animation order to animate.css将动画顺序添加到 animate.css
【发布时间】：2015-10-16 05:53:42
【问题描述】：

我想在使用animate.css 时在每个动画之间添加一个延迟，以便它们按顺序制作动画。例如，northernlighting.no（菜单项）。

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

【问题讨论】：

标签： jquery css html animation animate.css

【解决方案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");
});

【讨论】：