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/