鼠标悬停时棘手的延迟 [英] Tricky delay on mouseover

问题描述

这是我目前拥有的:

$("#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-> 500毫秒后打开飞行器

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

如果mouseout .flycart-> 500毫秒后关闭飞行器

if mouseout .flycart -> close flycart after 500ms

我需要的是:

如果鼠标悬停#cart-summary持续ATLEAST 500毫秒->打开flycart

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

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

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

编辑为添加:如果可以在此处使用，我还使用hoverIntent?

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

非常感谢！

推荐答案

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

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

这篇关于鼠标悬停时棘手的延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！