Fade in Title using JQuery

Question

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!

Answer 1

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.

Answer 2

1. All jQuery animations that change an element’s display to or from none don’t take effect if the element is already in that state. You’ll need to hide it first.

   $("#header").hide().fadeIn(10000);
   

2. Use $(document).ready, not $(window).load. In fact, you may want to eschew the variety of events in favour of putting the <script> block directly beneath the header element to minimize FOUC. Of course, that’s not necessary when you can…

3. Accomplish this with CSS. (You might need to duplicate each of these with a -webkit- prefix, too.)

   @keyframes fade-in {
       from { opacity: 0; }
       to { opacity: 1; }
   }
   
   #header {
       animation: fade-in 10s linear;
   }
   

4. That seems like a bit of an annoying animation. Are you sure it’s necessary?

5. This is just a guess, but you could maybe use more descriptive HTML:

   <header id="header">
       <h1 id="title">What’s Playing?</h1>
   </header>