每個元素的淡入效果延遲

Question

在黑暗中刺一下這一塊！

我一直在到處找，試圖找到一些複製這個不錯的網站，如果JS關閉 http://www.alectia.com/

這個網站無法負荷的效果 - 所以不是找翻版:-)

有大量的淡入效果（動畫CSS等）和CoDrops中的一些不錯的加載 - 但它們都影響所有元素在同一時間 - 沒有人知道的庫/方式動畫物品順序，所以他們加載在上面的網站？

在此先感謝 。本。

Answer 1

一些你需要的鏈接Transformations AND CSS CHEAT SHEET。如果你想避開JS方法，兩者都很適合。然而。如果你想要協調，JS和CSS的註釋會很好地結合在一起。所以你有點妥協。 基本上，你有你的css文件在你的css文件中，並在頁面加載或任何時候你想要動畫時調用它。在備忘單鏈接他們證明，但在這裏它是在任何情況下

$(window).scroll(function() { 
    $('#animatedElement').each(function(){ 
    var imagePos = $(this).offset().top; 

    var topOfWindow = $(window).scrollTop(); 
     if (imagePos < topOfWindow+400) { 
      $(this).addClass("slideUp"); 
     } 
    }); 
}); 
//This handles annimations over scrolling 
$('#animatedElement').click(function() { 
    $(this).addClass("slideUp"); 
});//This handles annimations on click 
And finally 
$(document).ready(function(){ 
$(this).addClass("slideUp"); 
});//page load. :) 

什麼你也可以看看，如果CSS不工作了那麼大（記住瀏覽器支持可以成爲任何男人的nighmare）是看看JS動畫。這裏有一個鏈接。 JQuery annimations

併爲您的實際問題。要讓所有元素同時動畫

function AnimateEverything(){ 
var AllElements = document.getElementsByTagName('div'); 
for(var i =0; i < AllElements.length; i++){ 
$(AllElements[i].addClass('cssAnimationClass');//I would suggest this one. 
//or.. 
$(AllElements[i].annimate(//annimation of choice.. 
)} 
}; 

基本上獲得頁面中的所有div並使其具有動畫效果。