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

fiddle :http://jsfiddle.net/XexmW/