title: jQuery - Animation flicker using hover()
body: <p>I have a setup as described in this <a href="https://stackoverflow.com/questions/2857998/stop-jquery-animations-stacking">question</a> which works perfectly.  Essentially a drop down menu grows when you move your mouse over it to expose more options.</p>
  
  <p>There is, however, a small issue.  If you move the mouse outside of the <code>#dropdown</code> div and then back in again quickly it constantly fires the <code>mouseenter</code> and <code>mouseleave</code> events causing a never ending cycle of flickering.  How can I get around it?</p>
  
  <p>Here is my current jQuery code</p>
  
  <pre><code>$("#dropdown").hover(function() { 
          $(this).stop(true,true).fadeTo('fast',1);
          $("#options").stop(true,true).slideDown();
      }, function() { 
          $(this).stop(true,true).fadeTo('fast',0.1);
          $("#options").stop(true,true).slideUp();
      }
  );
  </code></pre>
  
  <p>And current HTML code</p>
  
  <pre><code>&lt;div id="dropdown"&gt;
      &lt;div id="optionsPeek"&gt;Options&lt;/div&gt;
      &lt;div id="options"&gt;
          &lt;!-- Links here --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>dropdown</code> is visible by default (10% opacity), <code>optionspeek</code> is always visible and once you hover over it, the <code>options</code> div slides down and the links inside it become visible.</p>