title: Simple page fade in
body: <p>I have used a small section of code I have found on here before to fade in an entire page. The code I used was,</p>
  
  <p>SCRIPT</p>
  
  <pre><code>&lt;!-- ꜜꜜ page load ꜜꜜ --&gt;
   &lt;script&gt; 
      $(document).ready(function() {
          $('#p-load').fadeIn();
      });
   &lt;/script&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#p-load {
  display: none;
  }
  </code></pre>
  
  <p>The problem I am having is that the script is not appears as if it never runs. I have an additional script following this p-load could that have something to do with it?</p>
  
  <p>I'm still learning when it comes to scripts and I still get confused. I know that script runs in order on the page so I have positioned the p-load script above the second script on the page. Here it appears as if the script fails to run.</p>
  
  <p>However when I position the script just below the body tag it appears as if the script does execute however. it just jumps the fade and shows all the content. Thanks for your help in advance.</p>
  
  <p>CODE AS IT STANDS (16:06)</p>
  
  <pre><code>            &lt;!-- ꜜꜜ css styles ꜜꜜ --&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/style.css"/&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/division.css"/&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/navigation.css"/&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/library.css"/&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/accordion.css"/&gt;
  
          &lt;!--[if lte IE 8]&gt; &lt;link rel="stylesheet" href="/css/ie.css"&gt; &lt;![endif]--&gt;
  
  
          &lt;!-- ꜜꜜ scripts ꜜꜜ --&gt;           
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript"&gt; 
          $(document).ready(function() {
              $('#p-load').hide().fadeIn("slow");
          });
          &lt;/script&gt; 
  
          &lt;script type="text/javascript" charset="utf-8" src="scripts/anim.js"&gt;&lt;/script&gt;
  
  
  
  
  &lt;/head&gt;
  &lt;!-- ꜜꜜ end page head ꜜꜜ --&gt;
  
      &lt;!-- ꜜꜜ page body start ꜜꜜ --&gt;
      &lt;body&gt; 
      &lt;div id="p-load"&gt;
  </code></pre>
  
  <p>etc...</p>
  
  <p>The script is executing and running on other elements, as such, I set it to fade out delayed it by 3 seconds and applied it to the footer. the footer faded out after 3 seconds on page load. Why it isnt fading the entire page in beats me... :/</p>
  
  <p>THIS WORKS</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(document).ready(function() {
              $('#p-load').hide().delay(500).fadeIn("slow");
          });
          &lt;/script&gt; 
  </code></pre>
  
  <p>I have no idea why the delay triggers the animation now, but it does. Thanks everyone for your help. </p>