带有 jQuery 效果控件的 css 菜单答案

【问题标题】：css menu with jQuery effects control带有 jQuery 效果控件的 css 菜单
【发布时间】：2013-05-06 20:16:54
【问题描述】：

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

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

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

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

【问题讨论】：

你也可以做一个jsfiddle吗？
使用超时，或 setInterval
感谢您的回答，我试过 setInterval 但我不知道在代码中的确切位置:)
Shivan，我会答应的。
试试 hoverIntent jQuery 插件：cherne.net/brian/resources/jquery.hoverIntent.html

标签： jquery html css

【解决方案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/

【讨论】：