jquery - 使用悬停/淡入淡出折叠菜单

Question

这是我尝试过的：http: //jsfiddle.net/MRMr4/2/

当然有问题。

如您所见，当我将鼠标移动到正下方显示的部分时，该部分消失了。如何更改我的 jQuery，以便仅当鼠标离开 #menu 或 #products 时此部分才会消失？

$('#menu').hover(function(){
    $('#products').fadeTo('fast', 1);
}, function(){
    $('#products').fadeTo('fast', 0);
});

$('#products').mouseover(function(){
    $('#products').show();
}).mouseout(function(){
    $('#products').fadeTo('fast', 0);
});

Answer 1

正确的这种方法使用超时来延迟产品窗口的折叠。这将允许您将鼠标从菜单移动到产品窗口，而不会塌陷在您身上……！

$('#menu').mouseenter(function() {
    $('#products').fadeIn(100);

    var timeout = null;

    // Set timeout to delay collapse of product window
    $(this).mouseleave(function() {
        timeout = setTimeout(collapse, 300);
    });

    // Cancel the collapse event if product window is entered
    $('#products').mouseenter(function() {
        clearTimeout(timeout);
    }).mouseleave(function(){
        collapse();
    });
});

function collapse() {
    $('#products').fadeOut(100);
}

看看你更新的小提琴。