使用JavaScript或jQuery創建序列步驟[動畫]

我是javascript新手。使用JavaScript或jQuery創建序列步驟[動畫]

我想創建一些序列動作，一步一步來。因此，假設我有10S下面這個網站時間軸介紹：

步驟

展會標誌
顯示網站名稱
顯示我的名字
和許多許多其他行爲....

這是我嘗試

<script type="text/javascript"> 

    var bod = document.getElementById("_8d4a"); 
    var preTag = document.getElementById("style-text"); 
    var stand = document.getElementById("standby"); 

    setTimeout(function(){ bod.style.backgroundColor = "#000" }, 3000); 
    setTimeout(function(){ preTag.style.left = "500px" }, 7000); 
    setTimeout(function(){ preTag.style.left = "100px" }, 8000); 
    setTimeout(function(){ bod.style.backgroundImage = "url('index.jpg')" }, 7000); 
    setTimeout(function(){ bod.style.fontSize = "5em" }, 7000); 
    setTimeout(function(){ bod.style.backgroundImage = "url('index1.jpg')" }, 7300); 
    setTimeout(function(){ bod.style.fontSize = "1em" }, 7400); 
    setTimeout(function(){ stand.style.display = "block" }, 7600); 
    setTimeout(function(){ bod.style.backgroundImage = "url('No_signal.gif')" }, 7600); 
    setTimeout(function(){ stand.style.display = "none" }, 8500); 
    setTimeout(function(){ bod.style.backgroundImage = "none" }, 8500); 

</script>

，也是我知道我可以使用jQuery寫像這樣：

$(".a").fadeIn(3000,function(){ 
    $(".b").fadeIn(4000, function(){ 
     $(".c").fadeIn(5000); 
    }); 
});

但在那裏做這些動作的任何更好的方法，更清潔？

來源

2015-04-05 Amin

你可以使用一個像庫wow.js - http://mynameismatthieu.com/WOW/docs.html

WOW是主要用於通過滾動觸發動畫，但也有其可以添加到您希望動畫每個HTML元素有用的HTML數據的屬性。 E.G：

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">

這給出了一個動畫（幻燈片在左），持續時間（2秒）和一個延遲，直到動畫應該觸發（5秒）。

對於僅限CSS的解決方案，您可以考慮使用關鍵幀動畫。 CSS有animation-delay屬性可能滿足您的需求以及 - 這裏有一個簡單的例子：

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-delay

來源

2015-04-05 12:30:53 RepeatQuotations

使用JavaScript或jQuery創建序列步驟[動畫]

回答

相關問題