Question

I’m using hover() on a div to show an info panel when the user moves the mouse over, this works 90% of the time but sometimes the events don’t seem to fire correctly. This seems to be related to how fast you move the mouse in or out of the div.

I have setup a jsfiddle showing my html, js and css here – http://jsfiddle.net/Y9Hx6/43/

Is there a better (more reliable) way to achieve this?

Answer 1

It’s because you are are using e.target, instead of this. e.target could be pretty much anything when you’re quickly moving the mouse around, while in your case this would always be reliably referring to the tile.

Here is my fix:

http://jsfiddle.net/Y9Hx6/46/

Note that for optimization reasons I am using event delegation, there was no reason for each tile to have their own handler. I also changed it to use mouseenter mouseleave so the event won’t trigger when you hover over the slided up info.

Code:

function slideUp(e) {
    var info = $(this).find(".info");
    info.stop().animate({
        top: 200 - info.outerHeight()
    }, 250);
}

function slideDown(e) {
    $(this).find(".info").stop().animate({
        top: 200
    }, 250);
}

$( ".wrap" ).delegate( ".tile", "mouseenter mouseleave", function(e){
    if( e.type == "mouseenter" ) {
     slideUp.call( this, e );   
    }
    else {
     slideDown.call( this, e );   
    }
});