JQuery - stops the animation (fadeOut) and shows again when the mouse quickly enters / exits

I have a <div> that when you hover over the text will be displayed. When the mouse leaves, the text disappears. However, if the mouse enters the <div> again until completion, the fadeOuttext is not displayed again.

I know hoverintent, but I would prefer not to use it because of the small perceived delay that it conveys to events mouseEnter/mouseLeave.

Is there no way for mouseEnterhim to simply clear fadeOutand display the text afterwards ?

My current timeout attempt:

var timeouts = {};

$(document).ready(function(){
  $('#wrapper').hover(function(){
    clearTimeout(timeouts['test_hover']);
    $('#text').show();
  }, function(){
    timeouts['test_hover'] = setTimeout(function(){
      $('#text').fadeOut('slow');
    });
  });
});

jsbin: http://jsbin.com/upotuw/5

video: http://www.youtube.com/watch?v=7RLrz1bEQuU

-

: stop(): stop(true,true)

:

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');
    });
  });
});

http://jsbin.com/upotuw/7