禁用鼠标悬停事件然后重新启用

Question

如何在鼠标悬停后解除绑定或禁用鼠标悬停，然后在另一个框淡出时重新启用。

我尝试了解除绑定，但似乎它不起作用，它只是禁用了整个东西。

我什至尝试过超时，但这并没有发挥我的优势。

任何帮助将不胜感激，谢谢

$("#shopping_basket").mouseover(function() { 
            // set a timeout so that this event will not trigger twice when mouseover from the bottom
            setTimeout(function() {
                /*$("#shopping_basket").unbind(mouseover);*/
                $("#miniBasketDetails").fadeIn(500);
            },500);
            });     
        $("#miniBasketDetails").mouseleave(function() { $("#miniBasketDetails").fadeOut(500); });

Answer 1

只是猜测尝试这样的事情：

$("#shopping_basket").bind('mouseover', function() {
  setTimeout(function() {
    $("#shopping_basket").unbind('mouseover');
    $("#miniBasketDetails").fadeIn(500);
  }, 500);

 //Re-enable as needed: $("#shopping_basket").bind('mouseover', function(){});
});

此代码未经测试，但应该可以工作。

我认为您的问题是您将mouseover 作为变量而不是字符串传递给.unbind()。这就是为什么“整个事情”被禁用的原因，因为 JavaScript 正在寻找一个名为 mouseover 的变量，该变量未定义，并导致您的代码中断。试试这样：.unbind('mouseover')。

Answer 2

不确定这是否是您正在寻找的算法，它是based on answers shown in this question。
这里是the fiddle and the code：

$("#shopping_basket").hover(function() {
    $("#miniBasketDetails").fadeIn(500);
}, function() {
    $("#miniBasketDetails").data('is_over', false);
    setTimeout(function() {
        if (!$('#miniBasketDetails').data('is_over')) {
            //if not hovered over the #miniBasketDetails in 650 miliseconds after mouseleave
            $("#miniBasketDetails").fadeOut(500);
        }
    }, 650);
});

$("#miniBasketDetails").mouseenter(function() {
    $(this).data('is_over', true);
});

$('#miniBasketClose').click(function() {
    $("#miniBasketDetails").fadeOut(500, function() {
        $(this).data('is_over', false);
    });
});

span#miniBasketClose 只是一个可选的“关闭按钮”，不是代码功能所必需的。它的功能可以被替换（如果需要），例如也可以将鼠标悬停在其他一些元素上。