fade in divs on page load

Question

Hey everyone got a bit of code here that im a bit confused with. Im wanting the text and content within #test to load after about 4s of the browser loading. The text fades in nicely and moves how I want it, I applied a bit of jscript to make it fade in after 4s, just not sure why I cant get it to work.

Also is there a way to make images fade in the same way as I have done #test?

Ill link the relevant code

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; } } 

java

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

Here is a codepen version http://codepen.io/anon/pen/RPJaJj . You can see that the #test is doing its correct 2s fade. But it loads instantly when there should be a delay before the fadein.

Answer 1

You might be missing the DOM ready :

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

Answer 2

UPDATE,
Okay, it bugged me so i looked further into it..

This will work, if i understood correctly that this is what you want to do..

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

Add class "dnone" to your #test div

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

Add this to your Css:

.dnone {
  display: none;
}

Javascript code, removes display:none; from #test after 2.5sec:

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

I hope that's what you were looking for.. Edit it for your needs ofc.

Answer 3

The jQuery delay() function may be what you're looking for:

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

Answer 4

For a pure CSS solution to get the animation to start after 4 seconds, you could use the animation-delay property.

#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;
}