title: jQuery How do you get an image to fade in on load?
body: <p>All I want to do is fade my logo in on the page loading. I am new today to jQuery and I can't managed to fadeIn on load please help. Sorry if this question has already been answered I have had a look and try to adapt other answers for different question but nothing seems to work and its starting to frustrate me. </p>
  
  <p>Thanks. </p>
  
  <p>Code: </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;                                         
  $(function () {
  .load(function () {
        // set the image hidden by default    
        $('#logo').hide();.fadeIn(3000);
                                  }}                     
   &lt;/script&gt;                
      &lt;link rel="stylesheet" href="challenge.css"/&gt;  
  &lt;title&gt;Acme Widgets&lt;/title&gt;         
    &lt;/head&gt;     
    &lt;body&gt; 
       &lt;div id="wrapper"&gt; 
       &lt;div id="header"&gt;
       &lt;img id="logo" src="logo-smaller.jpg" /&gt; 
       &lt;/div&gt;
        &lt;div id="nav"&gt;
        navigation
       &lt;/div&gt;
        &lt;div id="leftCol"&gt;
        left col
       &lt;/div&gt;
        &lt;div id="rightCol"&gt;
          &lt;div id="header2"&gt;
          header 2
          &lt;/div&gt;
          &lt;div id="centreCol"&gt;
          body text
          &lt;/div&gt;
          &lt;div id="rightCol2"&gt;
          right col
          &lt;/div&gt;
       &lt;/div&gt;
       &lt;div id="footer"&gt;
       footer
       &lt;/div&gt;
       &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>