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/

带有jQuery效果控件的css菜单

1 个答案: