[jQuery] Moving mouse fast causes mouseout not to fire
Hello All -
I have the problem where for an image rollover, moving the mouse very
quickly can leave my roll over 'on' because the mouseout (mouseleave
seems to do the same thing) doesn't always fire reliably.
I wrote a solution to the problem but I don't like it. I've posted
the example here:
http://psd2cssonline.com/tutorials/nav/index.html
The important code is this:
var mouseX, mouseY;
$('*').mousemove( function(e) { mouseX = e.pageX; mouseY =
e.pageY; });
setInterval( function () {
$('.defHide:visible').each( function() {
if( mouseX < $(this).offset().left || mouseX > $
(this).offset().left + $(this).width() ||
mouseY < $(this).offset().top || mouseY > $(this).offset().top
+ $(this).height() )
{ $(this).trigger( 'mouseout' ); } });
}, 100 );
where all of the divs that are to be hidden by default have the class
defHide added to them.
The technique is kludgy at best however because it works by setting a
watchdog timer that checks current mouse position against the screen
space location of any currently visible divs that should by default be
off. It is CPU consuming and not very elegant. It seems to work fast
enough in IE7 and Opera (no visual performance degradation) but my FF2
actually looks slower when this is enabled.
Does anyone know of a better solution to this problem?
Thanks.
--
Shaun
shaun@psd2cssonline.com