Question

I have a <div> that when hovered over, will show some text. When the mouse leaves, the text fades out. However, if the mouse enters the <div> again before the fadeOut is complete, the text never shows again.

I am aware of hoverintent, but I’d prefer not to use it because of the slight perceived delay it gives to the mouseEnter/mouseLeave events.

Is there no way that, upon mouseEnter, it simply clears the fadeOut and shows the text again?

My current attempt using timeouts:

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

—

EDIT: Issue was needing to pass both parameters to the stop() function: stop(true,true)

Final working code is as follows:

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

Answer 1

You want to look into the JQuery stop() function:

http://api.jquery.com/stop/