title: jQuery - stop animation in progress (fadeOut) and show again when mouse enters/leaves quickly
body: <p>I have a &lt;div&gt; that when hovered over, will show some text. When the mouse leaves, the text fades out. However, if the mouse enters the &lt;div&gt; again before the <code>fadeOut</code> is complete, the text never shows again.</p>
  
  <p>I am aware of <code>hoverintent</code>, but I'd prefer not to use it because of the slight perceived delay it gives to the <code>mouseEnter/mouseLeave</code> events.</p>
  
  <p>Is there no way that, upon <code>mouseEnter</code>, it simply clears the <code>fadeOut</code> and shows the text again?</p>
  
  <p>My current attempt using timeouts:</p>
  
  <pre><code>var timeouts = {};
  
  $(document).ready(function(){
    $('#wrapper').hover(function(){
      clearTimeout(timeouts['test_hover']);
      $('#text').show();
    }, function(){
      timeouts['test_hover'] = setTimeout(function(){
        $('#text').fadeOut('slow');
      });
    });
  });
  </code></pre>
  
  <p>jsbin: <a href="http://jsbin.com/upotuw/5" rel="nofollow">http://jsbin.com/upotuw/5</a></p>
  
  <p>video: <a href="http://www.youtube.com/watch?v=7RLrz1bEQuU" rel="nofollow">http://www.youtube.com/watch?v=7RLrz1bEQuU</a></p>
  
  <p>--</p>
  
  <p>EDIT: Issue was needing to pass both parameters to the <code>stop()</code> function: <code>stop(true,true)</code></p>
  
  <p>Final working code is as follows:</p>
  
  <pre><code>var timeouts = {};
  
  $(document).ready(function(){
    $('#wrapper').hover(function(){
      clearTimeout(timeouts['test_hover']);
      $('#text').stop(true,true).show();
    }, function(){
      timeouts['test_hover'] = setTimeout(function(){
        $('#text').fadeOut('slow');
      });
    });
  });
  </code></pre>
  
  <p><a href="http://jsbin.com/upotuw/7" rel="nofollow">http://jsbin.com/upotuw/7</a></p>