3

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

1 Answer 1

4

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

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

1
  • 1
    Ah. I had a 'stop' on there before, but neglected to pass both variables as true. stop(true,true) worked.
    – waffl
    Apr 16, 2012 at 14:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.