title: jQuery hover/delay/fadeIn div's
body: <p>I stumbled upon this jQuery snippet:</p>
  
  <pre><code> $(".faded").each(function(i) {
     $(this).delay(i * 400).fadeIn();
   });​
  </code></pre>
  
  <p>See it in action: <a href="http://jsfiddle.net/RExZs/" rel="nofollow">http://jsfiddle.net/RExZs/</a></p>
  
  <p>Anyway I'm trying to turn it into a hover function, so when you hover over a nav-menu button, the div's fade in with this cool delay effect. And then when the mouse leaves, the div's should disappear. It's for a "STORE" button (anchor), so this will be used to display a list of products when they hover it.</p>
  
  <p>So far all I've come up with is:</p>
  
  <pre><code>  $(".products").hover(function(){   // I added THIS line
     $(".products-list").hide().each(function(i) { 
     $(this).delay(i * 400).fadeIn();  
      }); 
   });   // and of course, THIS line
  </code></pre>
  
  <p>The problem is that it starts displaying the div's as soon as the page loads, LOL.</p>
  
  <p>Now, when I hover the "STORE" button, the effect is <em>perfect</em>, but then when the mouse leaves it starts all over again, reloading those div's. </p>
  
  <p>Either help me, or tell me where I can go to get over my damn jQuery addiction. :)</p>
  
  <p>Thank you!</p>