在頁面加載時淡入div

Question

嘿，每個人都在這里有些混亂的代碼。 我希望瀏覽器加載約4秒鍾后加載#test中的文本和內容。 文本淡入淡出並隨心所欲地移動，我應用了一些jscript使其在4s后淡入，只是不確定為什么我無法使其正常工作。

還有沒有一種方法可以使圖像褪色，就像我執行#test一樣？

病態鏈接相關代碼

的HTML

的CSS

爪哇

這是Codepen版本http://codepen.io/anon/pen/RPJaJj 。 您可以看到#test正在執行正確的2s衰減。 但是，在淡入之前應有延遲時，它會立即加載。

Answer 1

您可能缺少DOM ready ：

$(document)
  .ready(function(){
    setTimeout(function(){
      $("#test").fadeIn(400);
    }, 5000);
  });

Answer 2

更新，
好吧，它困擾了我，所以我進一步研究了它。

如果我正確理解這就是您要執行的操作，那么它將起作用。

Js Fiddle： https : //jsfiddle.net/r8dzvmgL/

將類別“ dnone”添加到您的#test div中

 <div id="test" class="dnone">

將此添加到您的CSS：

.dnone {
  display: none;
}

Javascript代碼，刪除display：none; 在2.5秒后從#test中獲取：

setTimeout(function(){
 document.getElementById("test").className = "";
}, 2500);

我希望這就是您想要的。根據您的需要對其進行編輯。

Answer 3

jQuery delay()函數可能就是您想要的：

https://api.jquery.com/delay/

Answer 4

對於純CSS解決方案，讓動畫在4秒鍾后開始播放，可以使用animation-delay屬性。

#test p {
  animation: fadein 2s;
  -moz-animation: fadein 2s; /* Firefox */
  -webkit-animation: fadein 2s; /* Safari and Chrome */
  -o-animation: fadein 2s; /* Opera */
  /* Will delay the start of the animation for 4 seconds */
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}