JQuery 的“暂停和充值”功能如果光标停留在元素内则计时器

Question

与我一起工作的设计师给了我一些需要处理的功能，但我不知道如何处理它。她基本上想要以下内容；

• 当您将鼠标悬停在链接上时，面板应该下拉（完成此操作没有问题）。面板应该
• 在 10 秒后消失（也完成没有问题）
• 如果您的光标位于面板内，则面板应该永远不会消失。一旦你的光标离开面板，10 秒计时器应该再次启动（呃..）

有人能给我指出一个插件或文章的正确方向，解释如何实现第三个功能吗？我是一位经验丰富的开发人员，但正在努力解决如何解决这个问题，甚至从哪里开始谷歌搜索。这是我到目前为止所做的，除了第三个要点之外，一切都有效。我有一种感觉，我可能需要彻底改变我的方法才能使其发挥作用；

function showMiniBasket() {
    $("#basketMiniSummary").slideDown();
}
function hideMiniBasket() {
    $("#basketMiniSummary").fadeOut();
}

var config = {
    over: showMiniBasket, 
    timeout: 10000, 
    out: hideMiniBasket 
};

$("#basketDropDown").hoverIntent(config);

答案...

根据下面的建议，最终的解决方案是...

function showMiniBasket() {
    $("#basketMiniSummary").slideDown("fast");
}

function hideMiniBasket() {
    if (!$('#basketMiniSummary').hasClass('being_hovered')) {
        $("#basketMiniSummary").fadeOut();
    }
}

var config = {
    over: showMiniBasket,
    timeout: 1000,
    out: hideMiniBasket
};

$("#basketDropDown").hoverIntent(config);

$('#basketMiniSummary').hover(function() {
    //hover in
    $(this).addClass('being_hovered');
    $("#basketMiniSummary").slideDown();
}, function() {
    //hover out
    $(this).removeClass('being_hovered');
    $("#basketMiniSummary").delay(1000).fadeOut();        
});

Answer 1

我会像这样使用 $.hover ：

    $('#the_panel').hover(function () {
        //hover in
        $(this).addClass('being_hovered');
        $("#basketMiniSummary").slideDown();
    }, function () {
        //hover out
        $(this).removeClass('being_hovered');
        setInterval('hideMiniBasket()', 10000);
    });

    //Also hideMiniBasket should be modified
    function hideMiniBasket () {
        if (!$('#the_panel').hasClass('being_hovered')) {
            $("#basketMiniSummary").fadeOut();
        }
    }