頁面加載 10 秒后顯示 div

Question

我有這個腳本，我已經能夠在 20 秒內使其淡出，但我希望頁面加載后需要 10 秒才能顯示，我應該修改什么？

jQuery("#messageBox").hide().slideDown();
 setTimeout(function(){
  jQuery("#messageBox").fadeOut();        
 }, 20000);

提前致謝

Answer 1

要讓內容在 10 秒后淡入，您需要使用 CSS 隱藏頁面加載時的所有內容，以避免FOUC 問題，然后調用fadeIn() 。 像這樣的東西：

 setTimeout(function() { $('#container').fadeIn(); }, 10000);

 #container { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <h1>Lorem ipsum</h1> </div>

Answer 2

你正朝着正確的方向前進。 就像您應用淡出一樣。

您需要在setTimeout的幫助下在 10 秒后顯示您的div 。 但是您必須在頁面加載時默認隱藏此div 。

請參見下面的示例 -

 jQuery("#messageBox").hide(); setTimeout(function(){ jQuery("#messageBox").slideDown(); }, 10000); setTimeout(function(){ jQuery("#messageBox").fadeOut(); }, 20000);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="messageBox"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>