JQuery event - Delay mouseout

Question

Is there a way to make jquery wait a certain amount of time before the mouseout event fires?

He shoots too early, and I would rather wait 500 ms before he selects the mouse. Sample code that I use below.

$('.under-construction',this).bind({
    mousemove: function(e) {
        setToolTipPosition(this,e);
        css({'cursor' : 'crosshair' });
    },
    mouseover: function() {
        $c('show!');
        showUnderConstruction();
    },
    mouseout: function() {
        $c('hide!');
        hideUnderConstruction();
    },
    click: function() {
        return false;
    }
});

Is there a jquery way for this or should I do it myself?

Answer 1

Divide the logic inside mouseoutinto another function. in mouseouteven call this function with setTimeout("myMouseOut", 500). And you can combine the event mouseoverwith clearTimeout()up to reset the timer if the user moves to a new element.

Answer 2

setTimeout().

mouseout: function() {
  setTimeout(function(){
    $c('hide!');
    hideUnderConstruction();
  }, 500);
}

Answer 3

You can check the hoverIntent plugin to determine some vars that help with mouseenter / out interaction