javascript - jquery mouseleave 在 ie (8 & 9) 中过早触发

Question

http://standard8.tomangodns.com/

在上面的链接中，您会在网站的右上角找到一个小菜单图标。悬停时会打开一个菜单。当鼠标离开菜单容器时，有一个 mouseleave 事件来关闭菜单。除了在 ie8 / 9 中，只要您从菜单按钮上移动光标就会触发 mouseleave 事件，这可以正常工作。

//navigation slide out button
    $('body').on('mouseenter','.nav-container .nav-button',function(){ 
        $('.nav-container nav').show();
        $('.nav-container nav').animate({ width: '325px' }, 'fast');
    }); 

    $('.nav-container').mouseleave(function(){ 
        $('.nav-container nav').animate({ width: '0px' }, 'fast', function(){$('.nav-container nav').hide();});
    }); 

jquery 有点乱，因为我正在尝试很多解决方案来解决这个问题。

任何想法表示赞赏。

Answer 1

使用 mouseout 事件！

$('.nav-container').mouseout(function(){ 
        $('.nav-container nav').animate({ width: '0px' }, 'fast', function(){
            $('.nav-container nav').hide();});
    }); 

Answer 2

$('.nav-container .nav-button').hover(function(){
   $('.nav-container nav').animate({width: '350px'}, 300);

},function(){
    $('.nav-container nav').animate({width: '0'}, 300);
});