使用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的，我試圖修改解決這個職位 ，但它不工作。 這是我為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()配合使用，則可以使操作更.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后備廣告一起使用！

這是 Webkit的完整解決方案； 根據需要應用其他瀏覽器前綴。