title: jQuery fade flickers
body: <p>I have jQuery fade going here: <a href="http://dougie.thewestharbour.com/" rel="nofollow">http://dougie.thewestharbour.com/</a></p>
  
  <p>When you hover over the .main-overlay div I would like it to fade out then when you take your mouse off of it, I would like it to fade back in.</p>
  
  <p>However, you can see it's just flickering right now. I'm guessing it's because the div disappears so it's treated as a mouseout when it's faded out but I'm not sure how to go about solving it.</p>
  
  <p>Here is my javascript:</p>
  
  <pre><code>    $(document).ready(function () {
  
  
      $('.main-overlay').hover(
  
          //Mouseover, fadeIn the hidden hover class 
          function() {
  
              $(this).fadeOut('1000');
  
          },
  
          //Mouseout, fadeOut the hover class
          function() {
  
              $(this).fadeIn('1000');   
  
      }).click (function () {
  
          //Add selected class if user clicked on it
          $(this).addClass('selected');
  
      });
  
  });
  </code></pre>
  
  <p>And here is one of the items that the overlay div is attached to:</p>
  
  <pre><code>&lt;li&gt;&lt;div class="main-overlay"&gt;&lt;/div&gt;&lt;span class="caption"&gt;The store front&lt;/span&gt;&lt;img src="http://dougie.thewestharbour.com/wp-content/uploads/store-front.jpg" alt="store front" title="store-front" width="730" height="360" class="alignnone size-full wp-image-98" /&gt;&lt;/li&gt;
  </code></pre>
  
  <p>Thanks,</p>
  
  <p>Wade</p>