title: jQuery .fadeIn() on page load?
body: <p>I'm trying to set up some code so that I have a  that is hidden at first but then fades in after the page is loaded.</p>
  
  <p>I have the following HTML code:</p>
  
  <pre><code>&lt;div class="hidden"&gt;
  &lt;p&gt;This is some text.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then I also have this CSS code, which hides the <code>&lt;div&gt;</code>.</p>
  
  <pre><code>div.hidden
  {
      display: none
  }
  </code></pre>
  
  <p>Finally, I have my jQuery:</p>
  
  <pre><code>$(document).ready(function() {
      $('div').fadeOut(1);
      $('div').removeClass('hidden');
      $('div').fadeIn(1000);
  });
  </code></pre>
  
  <p>What I was hoping would happen was that the first .fadeOut() would fade out the , the removeClass would stop the CSS from hiding it, and the final .fadeIn() would fade it back onto the page.  Unfortunately, this did not work.</p>
  
  <p>You can view the code here:<a href="http://jsfiddle.net/Bm62Y/" rel="noreferrer">Fiddle</a></p>
  
  <p>So can someone please tell me how to keep a <code>&lt;div&gt;</code> hidden until a page loads, and then fade it in using jQuery?</p>
  
  <p>Thanks!</p>