0

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

  • 当您将鼠标悬停在链接上时，面板应下拉（完成此操作没问题）
  • 面板应该在 10 秒后消失（也没有问题）
  • 如果您的光标在面板内，则面板永远不会消失。光标离开面板后，10 秒计时器应重新开始（erm..）

谁能指出我正确的插件或文章的方向来解释如何实现这第三位功能？我是一个相当经验丰富的开发人员，但正在努力解决如何解决这个问题，甚至从哪里开始谷歌搜索。到目前为止，这就是我所拥有的，除了第三个要点外，所有这些都在工作。我有一种感觉，我可能需要完全改变我的方法才能让它发挥作用；

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

1 回答 1

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();
        }
    }
于 2012-02-01T17:55:18.660 回答