CSS菜单控制

Question

如果可能的话，我想一些帮助，我有我加入jQuery效果如淡入这个CSS菜单等

$('.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/