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.

Pretty sure the "#test p" animation is running, it's just happening before you can see it. That animation will run on page load and last 2 seconds. But you're fading in #test p's parent #test after the 5 second setTimeout. — Graham T, Jul 11 '15 at 20:41
No cause I changed #test to #test3 in the html and jquery and still had no affect. Was like a normal page load — factordog, Jul 11 '15 at 20:51
@factordog, interesting question. Could you give us a better demo of how it works now via `codepen`? I started one for you as an example. http://codepen.io/anon/pen/rVvooR. I would recommend editing your post to just point to your `codepen` so people can play with it. — Breedly, Jul 11 '15 at 21:38

score 0 · Answer 1 · answered Jul 11 '15 at 20:37

0

You might be missing the DOM ready:

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

answered Jul 11 '15 at 20:37

Abhishekh Gupta

6,206
4
18
46

user2267175 · Accepted Answer · 2015-07-14T00:58:09.180

0

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.

edited Jul 14 '15 at 00:58

answered Jul 11 '15 at 20:38

user2267175

595
5
14

I changed it to that one, and relinked the script but still no dice with it. – factordog Jul 11 '15 at 20:46
@factordog Check the update in my answer, I couldn't find it in your posted code, so that might be the issue :) – user2267175 Jul 12 '15 at 16:17
@factordog Check my new update.. Using display:none; on the #test and then removing it again with js.. thus loading #test and it's contents after the said timeout have expired. – user2267175 Jul 14 '15 at 00:18

anthonyjruffa · Answer 3 · 2015-07-11T20:58:37.330

0

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

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

edited Jul 11 '15 at 20:58

answered Jul 11 '15 at 20:40

anthonyjruffa

33
4

EDIT: The `delay()` function does not replace `setTimeout`, but rather delays between queued effects. Not having `document.ready()` may be at least part of your issue, however. Another problem you have here is that your function is getting invoked immediately when setTimeout is called. Check this out for more info: http://stackoverflow.com/questions/9184702/settimeout-not-delaying-a-function-call – anthonyjruffa Jul 11 '15 at 20:59

Tim · Answer 4 · 2015-07-13T23:37:51.240

0

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

edited Jul 13 '15 at 23:37

answered Jul 12 '15 at 16:22

Tim

2,123
4
27
44

thanks will give that a bash if i cant get the code to work! – factordog Jul 13 '15 at 16:38

fade in divs on page load

4 Answers4