如何使用jQuery延迟mouseleave动作

我有一个菜单。在这个菜单中我有一些隐藏的子菜单，所以我在悬停操作后显示它。我也对子菜单显示有一些延迟效果。现在我想添加相同的效果来隐藏它。但它不起作用。另外我怎么能在悬停/ mouseenter下一个菜单元素上添加一些延迟？如何使用jQuery延迟mouseleave动作

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

来源

2013-01-16 Lukas

* HTTP：//stackoverflow.com/questions/3709255/add-delay-to-mouseleave-in-jquery* –

我取得了良好的解决了这个问题，所以：

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); 
    } 
});

来源

2013-02-13 10:31:05 Lukas