title: JQUERY image overlay fadeIn() fades in and out when mouseover
body: <p>I am looking to get a nice smooth rollover image to fadeIn over the parent image for a set of buttons.</p>
  
  <p>I have my overlay image stacked ontop of my main image, and it's set to "display: none;".</p>
  
  <p>I have the following jQuery, and it works to FadeIn the overlay image, but it fades it in and out repeatedly when the mouse is over the image. Do I have something wrong in the syntax for my jQuery?  Thanks in advance.</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
      jQuery(document).ready(function() {
          jQuery(".main").mouseenter(function() {
              jQuery(".overlay").fadeIn();
          });
  
          jQuery(".main").mouseleave(function() {
              jQuery(".overlay").fadeOut();
          });
      }); 
  
   &lt;/script&gt;
  </code></pre>
  
  <p>and my HTML code:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  &lt;!--
     .hoverbox { position: relative; }
     .main { width: 243px; height: 117px; }
     .overlay { position: absolute; width: 243px; height: 117px; top: 0; left: 0; display: none; }
  --&gt;
  &lt;/style&gt;
  
      &lt;!-- button 1 --&gt;
      &lt;div class="hoverbox" style="float: left; width: 243px; height: 117px;"&gt;
          &lt;a href="/locations/sacramento-international-airport/"&gt;
              &lt;img class="main" src="/images/home-button-smf_orig.jpg" /&gt;
              &lt;img class="overlay" src="/images/home-button-smf_rollover.jpg" /&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;!-- end button 1 --&gt;
  </code></pre>