Question

I have a binding that I want to control a bit better.. Here’s the code first off:

 $('#topnav').bind({

                            mouseenter: function() {
                                $("#topnav").animate({opacity: 1.0, width: '98%', height: '38px'});
                            },
                            mouseleave: function() {
                                   $("#topnav").delay(2000).animate({opacity: 0.9, width: '310px', height: '33px'});
                            }

                            });

Currently you see I am delaying the mouseleave because the navbar the person is “mouseenter-ing” is very small, and if the mouse happens to leave for a split second, it triggers the mouseleave event. I want to control that a bit better. I want some type of if statement that says “if the mouse leaves the #topnav div for less than three seconds and re-enters, pretend the mouse never even left”

If this does not make sense I will clarify.

Thanks!

Answer 1

You could achieve this with setTimeout() and clearTimeout():

var tout;
$('#topnav').bind({
  mouseenter: function() {
    clearTimeout(tout);
    $("#topnav").animate({opacity: 1.0, width: '98%', height: '38px'});
  },
  mouseleave: function() {
    tout = setTimeout(function() {
      $("#topnav").animate({opacity: 0.9, width: '310px', height: '33px'});
    }, 2000);
  }
});