Search code examples
javascriptjqueryhtmlfadein

Fade in Title using JQuery

I have the following HTML:

      <div id="header">
         <div id="logo_title">
            <p> What's Playing? </p>
         </div>
    </div>

I want to make this fade in slowly when a user first visits the website. I'm using the following javascript:

  $(window).load(function () {
     $("#header").fadeIn(10000); 
   });

Here's the CSS: 

      #logo_title, #logo_subtitle{
         height: 45px;
         font-family: 'Open Sans', sans-serif;
         font-weight: 300;
         font-size: 80px; 
         z-index: 4;
         text-align: center;
         margin: 100px 0px 0 0;
     line-height: 75px;
    }

It doesn't seem to be working though. Any idea on what I'm doing wrong? I'm new at this!

Thanks!

Solution

  • Start off by setting your #header to display: none, i.e.

     #header{display:none;}

    then start the animation with 

    $(document).ready(function () {
     $("#header").fadeIn(3000); 
   });

    See jsFiddle.