title: jquery .mouseover() and .mouseout() with fade
body: <p>I want to fade a div in with jquery when the user hovers over a parent div.</p>
  
  <p>I have the following code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
          &lt;title&gt;Explore D&amp;amp;D Creative&lt;/title&gt;
          &lt;link rel="stylesheet" href="media/css/explore.css" /&gt;
          &lt;script type="text/javascript" src="media/js/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="media/js/jquery.custom.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
  
      &lt;body id="home"&gt;
  
          &lt;!-- BEGIN CONTENT --&gt;
          &lt;div id="content"&gt;
  
              &lt;!-- BEGIN CONTENT TOP SLIDESHOW --&gt;
              &lt;div id="top-slide"&gt;
                  &lt;div class="wrapper"&gt;
  
                  &lt;/div&gt;  
                  &lt;div id="select"&gt;...&lt;/div&gt;          
              &lt;/div&gt;
              &lt;!-- END CONTENT TOP SLIDESHOW --&gt;
  
  
  
              &lt;!-- BEGIN CONTENT TWITTER --&gt;
              &lt;div id="twitter-main"&gt;
                  &lt;div class="wrapper"&gt;
                      &lt;i class="icon-twitter"&gt;&lt;/i&gt;
                      &lt;span class="divider"&gt;&lt;/span&gt;
                      &lt;h2 class="feed"&gt;THIS IS SOME TWITTER TEXT&lt;/h2&gt;
                      &lt;p class="info"&gt;@DandDCreative - SOME TIME AGO&lt;/p&gt;
                  &lt;/div&gt;            
              &lt;/div&gt;
              &lt;!-- END CONTENT TWIITER --&gt;
  
  
          &lt;/div&gt;
          &lt;!-- END CONTENT --&gt;
  
      &lt;/body&gt;
  
  &lt;/html&gt;​
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/*============================================
      CONTENT
  ============================================*/
  #content {
      min-height:100%;
      margin-top:55px;
      padding-top:10px;
  }
  /*============================================
      HOME.PHP
  ============================================*/
  #home #content #top-slide {
      background-color:#3D3B37;
      height:300px;
      position:relative;
  }
  
  #home #content #top-slide #select {
      height:48px;
      width:100%;
      position:absolute;
      bottom:0;
      background:url(../img/home/bg-slie-select.png) repeat;
      display:none;
  }
  
  #home #content #twitter-main {
      background-color:#cccccc;
      height:200px;
      margin:10px 0;
      padding-top:30px;
      text-align:center;
  }
  
  #home #content #twitter-main i.icon-twitter {
      background:url(../img/common/social/twitter.png) no-repeat center;
      width:37px;
      height:37px;
      margin:0px auto 20px auto;
      display:block;
  }
  
  #home #content #twitter-main span.divider {
      border-top:1px solid #535353;
      height:0;
      width:100px;
      display:block;
      margin:0 auto;
  }
  
  #home #content #twitter-main h2.feed {
      margin:40px 0;
  }
  
  #home #content #twitter-main p.info {
      font-size:10px;
      color:#666666;
  }
  </code></pre>
  
  <p>and JS:</p>
  
  <pre><code>$(document).ready(function() {
  
  
      //HOME.PHP
  
      $('#top-slide').mouseover(function() {
          ('#select').fadeIn(600);
      });
  
      $('#top-slide').mouseout(function() {
          ('#select').fadeOut(600);
      });           
  
  });​
  </code></pre>
  
  <p>This code brings up the following errors on mouse in and mouse out respectivley :</p>
  
  <p><code>Uncaught TypeError: Object #select has no method 'fadeIn'</code></p>
  
  <p><code>Uncaught TypeError: Object #select has no method 'fadeOut'</code></p>
  
  <p>I thought it might be something to do with the mouseover / mouseout methods but tried it with click method also but it does the same.</p>
  
  <p>I have probably done something silly but i cant find the issue.</p>
  
  <p>Here is a JSFIDDLE for everyone: <a href="http://jsfiddle.net/Ze28y/1/" rel="nofollow">http://jsfiddle.net/Ze28y/1/</a></p>