Jquery - Delay mouseout event.

Question

Is there a way to make jquery wait a certain about amount of time before mouseout event is fired?

It is firing too early at the moment and I'd prefer to wait 500ms before it evaluates the mouse out. An example of the code I'm using 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 to do this or will I have to do it myself?

Answer 1

You could always wrap your logic in a setTimeout() function.

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

Answer 2

Split the logic inside the mouseout into another function. in the mouseout even call this function with a setTimeout("myMouseOut", 500). And you can combine the mouseover event with a clearTimeout() to reset the timer if the user moves into a new element.

Answer 3

You might check out the hoverIntent plugin lets you define some vars that help with mouseenter/out interactions

Answer 4

i'm really interested in how to do this as well, i've tried the hoverintent plugin but it's 3.5kb (i think), just for that little half a second delay, WAYY too big for that one little thing that you could do with just a little code.