當頁面打開時文本自動淡入淡出？

-3

我正在個人網站上工作，我希望我的頁面最初顯示爲空白。然後標題在大約一秒後淡入，然後導航欄在此之後淡入。當頁面打開時文本自動淡入淡出？

我只學會了如何讓事情淡化點擊，所以我尋找如何使它們自動淡入，一旦頁面加載幫助。

謝謝！當頁面加載動畫將

<p class="animated fadeIn">Hello World</p>

：

來源

2016-10-14 sparks

https://jsfiddle.net/jxtdgj9s/ – DaniP

的animate.css庫可能會對此有所幫助：https://daneden.github.io/animate.css/

你想要做的是安裝庫，寫一些CSS這樣立即發生，沒有任何點擊事件。

這裏是一個小提琴鏈接：https://jsfiddle.net/txx00wzr/

希望這有助於。

來源

2016-10-14 21:16:28 link

您可以使用jQuery的.delay在$(document).ready：

$(document).ready(function() { 
     console.log("document ready occurred!"); 
     // Add your animations is here: 
     var myHeader = $('#header'); 
     myHerader.delay(500).fadeIn('300'); 
});

您可以使用您的動畫，或者可能使用animate.css

來源

2016-10-14 21:16:45

你應該讓你的項目隱藏的開始，使用jQuery的.ready()事件觸發.fadeIn()。 .fadeIn()函數接受一個回調參數，該參數允許您鏈接動畫。

這裏有一個簡單的例子：

$(function() { 
 
    $(".header").fadeIn(5000, function() { 
 
    $(".header nav").fadeIn(5000); 
 
    }); 
 
});

.header { 
 
    display: none; 
 
    height: 100px; 
 
    width: 100%; 
 
    background-color: #ccc; 
 
} 
 

 
.header nav { 
 
    display: none; 
 
    list-style-type: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="header"> 
 
    <nav> 
 
    <ul> 
 
     <li>Nav 1</li> 
 
     <li>Nav 2</li> 
 
     <li>Nav 3</li> 
 
     <li>Nav 4</li> 
 
     <li>Nav 5</li> 
 
    </ul> 
 
    </nav> 
 
</div>

來源

2016-10-14 21:19:28 dave

如果你想使用普通的JavaScript，我建議你到最初指定display: none;風格爲所有body孩子，然後使用onload事件像這樣：<body onload="fade_in();">
函數fade_in()必須使元素可見。我使用以下這行代碼：
document.getElementById("<element_id>").style.display = "block";

如果您希望它們不是立即顯示，而是順利顯示，只需將transition設置爲您所需的值即可。

若要延遲，您可以使用setTimeout()函數：setTimeout() on W3Schools

如果我已經正確地理解了您，解決方案就很簡單。

來源

2016-10-14 21:25:00 KKastaneda

當頁面打開時文本自動淡入淡出？

回答

相關問題