JQuery 功能，用于在光标停留在元素内时"pause and top up"计时器

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

我会像这样使用$.horver：

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