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

【问题标题】：How to delay mouseleave action with jQuery如何使用 jQuery 延迟鼠标离开动作
【发布时间】：2013-01-16 11:10:58
【问题描述】：

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

$('.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);
    }
});

【问题讨论】：

stackoverflow.com/questions/3709255/…

标签： javascript jquery delay mouseenter mouseleave

【解决方案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);
    }
});

【讨论】：

【解决方案2】：

可能是您在 mouseleave 事件中没有使用self 吗？该函数中的this 是什么？写一个debugger 语句，看看this 是不是你认为它所指的东西。

【讨论】：

【解决方案3】：

您是否考虑过使用.delay()？

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

【讨论】：