fade in divs на странице load

Question

Привет всем, у меня здесь есть код, который немного смущен. Я хочу, чтобы текст и содержимое в #test загружались примерно через 4 с загрузки браузера. Текст исчезает красиво и движется, как я этого хочу, я применил немного jscript, чтобы заставить его исчезать после 4 секунд, просто не знаю, почему я не могу заставить его работать.

Также есть способ сделать изображения затухающими так же, как я сделал #test?

Ill ссылку соответствующего кода

HTML

<!--===================================================Fader===================================================!--> 
<div class="fadewrapper"> 
    <div class="fader"> 
     <img class="bottom" src="images/dsas.png"/> 
     <img class="top" src="images/dsa.png"/> 
    </div> 
</div> 
<!--===================================================Content===================================================!--> 
<div class="contentwrap">  
    <div class="textwrap"> 
    <div id="test"> 
      <div class="contentspace"> 
      </div><!--close contentspace!--> 
      <div class="content">  
        <p class="headertxt">Specializations</p> 
        <p>With various skills in branding, multi-media 
        and advertising I am able to provide fresh and inspiring solutions 
        for the task given to me. Using various programs such as:</p>    
        <p><img src="images/1436419348_Photoshop.png"/><img src="images/1436419350_Illustrator.png" /><img src="images/1436419354_Dreamweaver.png" /><img src=   "images/1436419357_Premiere_Pro.png" /><img src="images/1436419359_After_Effects.png" /><img src="images/1436419356_Flash_Pro.png" /></p> 
      </div><!--close content!--> 
      <div class="divider"> 
        <img src="images/divide.png"/> 
      </div><!--close divider!--> 
      <div class="content2"> 
       <p class="headertxt">Why me?</p> 
       <p>The work I create is reflecting something 
       fresh and exciting in order to meet the clients 
       needs. About pushing for new and innovative ideas 
       and pushing for an end result of brand and product growth</p> 
      </div><!--close content2!--> 
      <div class="contentspace"> 
      </div><!--close contentspace!--> 
     </div><!--close test!--> 
    </div><!--close textwrap!--> 
</div><!--close contentwrap!--> 
<!--===================================================Footer===================================================!--> 
    <div class="footerwrap"> 
     <p class="foottxt">Designed and developed by Luke Babich- All Rights Reserved ©2015</p> 
    </div><!--close footerwrap!--> 
</div><!--close wrapper!--> 
<script src="scripts/onopen.js"></script> 
</body> 
</html> 

CSS

/*---------------------------- Content ----------------------------*/ 
#test p { 
    animation: fadein 2s; 
    -moz-animation: fadein 2s; /* Firefox */ 
    -webkit-animation: fadein 2s; /* Safari and Chrome */ 
    -o-animation: fadein 2s; /* Opera */ 
} 
@keyframes fadein { 
    from { 
     margin-top:-5px; 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 
@-moz-keyframes fadein { /* Firefox */ 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 
@-webkit-keyframes fadein { /* Safari and Chrome */ 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 
@-o-keyframes fadein { /* Opera */ 
    from { 
     opacity:0; 
    } 
    to { 
     opacity: 1; 
    } 
} 

ява

setTimeout(function(){ 
    $("#test").fadeIn(400); 
}, 5000)// JavaScript Document 

Вот codepen версия http://codepen.io/anon/pen/RPJaJj. Вы можете видеть, что #test делает свои правильные 2s fade. Но он загружается мгновенно, когда должна произойти задержка перед fadein.

Answer 1

UPDATE,
Хорошо, что прослушивают меня, так что я смотрел дальше в него ..

Это будет работать, если я правильно, что это понятно, что вы хотите сделать ..

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

Добавить CLAS s "dnone" на свой #test DIV

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

Добавьте это в Css:

.dnone { 
    display: none; 
} 

кода Javascript, удаляет дисплей: нет; от #test после 2.5sec:

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

Я надеюсь, что это то, что вы искали .. Редактировать это для ваших нужд OFC.

Answer 2

Вы можете отсутствовать в DOM ready:

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

Answer 3

функция JQuery 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; 
}