jquery - 带有 jQ​​uery 效果控件的 css 菜单

Question

如果可能的话，我需要一些帮助，我有这个 css 菜单，我正在添加 jquery 效果，如淡入淡出等。

$('.main_menu li').hover(function()
{
    $(this).children('ul').hide().fadeIn(300);
},
function()
{
    $(this).children('ul').stop(true, true).fadeOut(200);
});

到目前为止，除了我想处理的一个小细节之外，一切都很好。例如，如果用户将鼠标从子菜单的子菜单上移开以返回第一个子菜单，则鼠标指针总是有可能在至少几毫秒内超出菜单范围，这只会淡出整个菜单。我想在javascript决定淡出菜单之前给它一个延迟或其他东西，同时如果鼠标只是从一个子菜单移动到另一个具有子菜单的子菜单，那么就没有延迟。在这种特殊情况下，最好的方法是什么？

祝您有美好的一天，并提前感谢您。

Answer 1

您可以用超时包装淡出效果。请注意此处的“this”关键字。您将需要存储其上下文：

$('.main_menu li').hover(function()
{
    $(this).children('ul').hide().fadeIn(300);
},
function()
{
    // need to keep the context 
    var that = this;

    // set a 100ms timeout
    setTimeout(function() {
        // if you use this here it would refer to the
        // function in the timeout
        $(that).children('ul').stop(true, true).fadeOut(200);
    }, 100);
});

小提琴：http: //jsfiddle.net/XexmW/