Question

I have floating box on my site. I show it on mousenter and hide onmouseleave. Like this:

$(box).mouseenter(function(evt) {showBox();});

and

$(what).parent().mouseleave(function(evt) {hideBox();});

When I perform quick mouse move over the “box” it shows up.
How not to show it in that case?
Thanks.

Answer 1

var showTimer;

$( box ).hover( function(){
    // wait .5 sec to show the box
    showTimer = setTimeout( showBox, 500 );

}, function(){
    // wipe timer so that showBox isn't called if < .5 sec
    if( showTimer ){
        clearTimeout( showTimer );
        showTimer = null;
    }

    hideBox();
}