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's完整的webkit解决方案;根据需要应用其他浏览器前缀。

使用CSS3和jQuery顺序动画元素

3 个答案: