Tricky delay on mouseover

Question

This is what I have currently:

$(\"#cart-summary\").mouseenter(function () {
    $(\'.flycart\').delay(500).slideDown(\'fast\');
});
$(\".flycart\").mouseleave(f         


        

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)
});