javascript - 使用 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 .