如何使用jQuery延迟鼠标离开动作

Question

我有一个菜单。在这个菜单中，我有一些隐藏的子菜单，所以我在悬停动作之后显示它。我也有一些延迟效果的子菜单显示。现在我想添加相同的隐藏效果。但这行不通。另外，我如何添加一些延迟悬停/鼠标进入下一个菜单元素?

$('.main_menu ul li').on({
    mouseenter: function(){
        var self = this,
            time = 200;
        $(self).data('timer', setTimeout(function(){
            $(self).children('.sub_menu_main').addClass('opened');
        }, time));
    },
    mouseleave: function(){
        var self = this,
            time = 200;
        clearTimeout($(self).data('timer'));
        setTimeout(function() {
            $(self).children('.sub_menu_main').removeClass('opened');
        }, time);
    }
});

Answer 1

我很好地解决了这个问题，所以:

var timer;
$('.main_menu ul li').on({
    mouseenter: function(){
        var self = this;
        clearTimeout(timer);
        timer = setTimeout(function(){
            $(self).children('.sub_menu_main').addClass('opened');
        }, 100)
    },
    mouseleave: function(){
        var self = this;
        setTimeout(function(){
            if (!$(self).children('.sub_menu_main').is(":hover")){
                 $(self).children('.sub_menu_main').removeClass('opened');
            }
        }, 100);
    }
});

Answer 2

可能是你在mouseleave事件中不使用self吗?这个函数中的this是什么?放一个debugger语句，看看this是不是你认为它指的东西。

Answer 3

您考虑过使用.delay()吗?

http://api.jquery.com/delay/