.delay function in a .mouseleave event

Question

So im trying to add a delay to a Mouse leave event so it doesnt glitch if one is on the edge of hovering over the element

$(window).load(function(){
$("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").mouseenter(function () {
    $("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").animate({
        bottom: 75
    });
});
$("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").mouseleave(function () {
    .delay(10)//Have a delay here
    $("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").animate({
        bottom: -75
    });
});
});

Any ideas??

Answer 1

On the mouseleave event, you can use setTimeout to delay the execution of a function. Capturing the id returned from the setTimeout function allows you to prevent that function from executing with clearTimeout. So if a user puts their mouse back over the area before the delay finishes, the element won't execute the mouseleave animation.

$(document).ready(function(){
    var timeoutID ;

    $("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").mouseenter(function () {
        // Don't execute the hide function if it hasn't executed
        clearTimeout( timeoutID );
        $("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").animate({
            bottom: 75
        });
    });
    $("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").mouseleave(function () {
        timeoutID  = setTimeout(function(){
            $("#cp_widget_7c184d64-36ed-4bb9-b617-c9034c2824c6").animate({
                bottom: -75
            });
        }, 1000) // Delay 1000 milliseconds
    });
});

Here is a fiddle: http://jsfiddle.net/t829p/3/

Documentation on the setTimeout and clearTimeout functions:

https://developer.mozilla.org/en-US/docs/Web/API/Window.setTimeout

https://developer.mozilla.org/en-US/docs/Web/API/window.clearTimeout

Answer 2

I use this plugin, does a great job on avoiding 'accidental hovers'

http://cherne.net/brian/resources/jquery.hoverIntent.html