将动画订单添加到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");
});