jquery - 鼠标悬停时棘手的延迟

这是我目前所拥有的:

$("#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();
});

它的作用是:

如果将鼠标悬停在＃cart-summary-> 500ms之后打开flycart

如果mouseout .flycart-> 500ms后关闭flycart

我需要的是:

如果将鼠标悬停在＃cart-summary上以获得ATLEAST 500毫秒->打开flycart

如果mouseout .flycart为ATLEAST 500ms->关闭flycart

编辑添加:我也使用hoverIntent，如果可以在这里使用的话？

非常感谢!

最佳答案

使用setTimeout来检查您设置/取消设置的标志(我正在使用一个类)是否仍然有效。

$("#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)
});

关于jquery - 鼠标悬停时棘手的延迟，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/1510594/