Tricky delay on mouseover

Question

This is what I have currently:

$("#cart-summary").mouseenter(function () {
    $('.flycart').delay(500).slideDown('fast');
});
$(".flycart").mouseleave(function () {
    $('.flycart').delay(500).slideUp('fast');
}).find('a.close').click(function(){
   $(this).parents('.flycart').hide();
});

What it does is:

If mouseover #cart-summary -> open flycart after 500ms

if mouseout .flycart -> close flycart after 500ms

What I need is:

If mouseover #cart-summary for ATLEAST 500ms -> open flycart

if mouseout .flycart for ATLEAST 500ms -> close flycart

Edited to Add: I also use hoverIntent, if that can be used here?

Many thanks!

Answer 1

Use the setTimeout to check if a flag you set/unset (I'm using a class) is still valid.

$("#cart-summary").mouseenter(function () {
    $("#cart-summary").addClass("hasFocus");
    setTimeout(function(){ 
        if ($("#cart-summary").hasClass("hasFocus")) {
            $('.flycart').slideDown('fast');
        }
      }, 500 );
      });

$("#cart-summary").mouseleave(function () {
    $("#cart-summary").removeClass("hasFocus");
});


$(".flycart").mouseenter(function () {
    $("#cart-summary").removeClass("lostFocus");    
});

$(".flycart").mouseleave(function () {
    $("#cart-summary").addClass("lostFocus");
    setTimeout(function(){ 
        if ($("#cart-summary").hasClass("hasFocus")) { 
            $('.flycart').slideUp('fast');
            }).find('a.close').click(function(){
            $(this).parents('.flycart').hide();
        }
    }, 500)
});

Answer 2

Sounds like you might need the HoverIntent plugin.

I don't know if it'll help you with the mouseout ATLEAST 500ms though. But maybe there's an option in there for that.