使用 CSS3 和 jQuery 顺序动画元素

Question

我是 jQuery（以及 CSS3 和其他一切）的初学者，我想知道如何自动为三个不同的元素（在本例中为图像）设置动画，以便它们按顺序一个接一个地出现 - # 1、#2、#3 - 页面加载时。这是我的 CSS：

img#element3 {
    position:absolute;
    opacity:0;
    top:25px;
}

img#element2 {
    position:absolute;
    opacity:0;
    top:270px;
    left:60px;
    margin:10px 0;
}

img#element1 {
    position:absolute;
    opacity:0;
    top:328px;
    left:70px;
    margin:10px 0;
}

对于 jQuery，我尝试修改 this post 中的解决方案，但它不起作用。这是我为 jQuery 所做的：

$(document).ready(handler)
    $("#element3").animate({opacity: "1"}, "slow", function() {
    $("#element2").animate({opacity: "1"}, "slow", function() {
    $("element1").animate({opacity: "1"}, "slow", function() {
    });
});
});

有没有办法只使用 CSS3 动画或过渡来做到这一点？如果没有，使用 jQuery 的正确方法是什么？如何指定顺序和延迟？

Answer 1

你无法单独使用 CSS 制作分段动画。

您的代码有很多语法问题。您可以咨询您的错误控制台或使用JSLint等工具。

我可能会使用...

$(document).ready(function() {
    $("#element3").fadeIn('slow', function() {
        $("#element2").fadeIn('slow', function() {
            $("#element1").fadeIn('slow');
        });
    });
});

jsFiddle.

Answer 2

如果你使用一个类，或者带有.each() 的多重选择器，会更简洁：

$(document).ready(function() {
    $("#element3,#element2,#element1").each(function(i) {
        $(this).delay(600*i).animate({opacity: "1"}, "slow");
    });
});

...或者如果顺序颠倒：

$(document).ready(function() {
    $( $("#element3,#element2,#element1").get().reverse() ).each(function(i) {
        $(this).delay(600*i).animate({opacity: "1"}, "slow");
    });
});

Answer 3

这完全可以通过 css3 动画实现，不像标记的答案所说的那样。

以他的解决方案为基础：

使用keyframes 和animation-delay 一个接一个地触发动画。

@keyframes 'fadein' {
    from { opacity: 0; }
    to { opacity: 1; }
}

只需将每个元素上的 animation-delay 增加到等于前面元素 animation-duration 值的总和即可。

当然要确保使用 modernizr 与 js 后备！

here'swebkit的完整解决方案；根据需要应用其他浏览器前缀。