jquery - Jquery同时事件关系

Question

当同时触发事件时，我无法弄清楚如何实现一个事件与另一个事件的解除绑定。我有这种 html 层次结构：

<div class="first"></div>
<div class="second"></div>

当鼠标输入 .first 时，会显示 .second。然后，如果鼠标离开 .first，.second 应该隐藏，除非鼠标正在进入 .second。所以，我的问题是同时触发了 $('.first').mouseleave() & $('.second').mouseenter() 。我尝试了这样的事情，但没有结果：

$('.first').mouseenter(function(){
    $('.second').show();
});

$('.first').mouseleave(function(){
    $('.second').hide();
});

$('.second').mouseenter(function(){
     $('.first').unbind('mouseleave');
});

$('.second').mouseleave(function(){
     $('.first').bind('mouseleave');
     $('.second').hide();
});

有什么线索吗？

这是示例：http: //jsfiddle.net/XdU7H/

Answer 1

Timeouts !

var hideTimer;

$('.first').mouseenter(function(){
    $('.second').show();
});

$('.first').mouseleave(function(){
    hideTimer = setTimeout(function() {
       $('.second').hide();
    }, 500);
});

$('.second').mouseenter(function(){
     clearTimeout(hideTimer);
     $('.first').unbind('mouseleave');
});

$('.second').mouseleave(function(){
     $('.first').bind('mouseleave');
     $('.second').hide();
});

Tweak it to your needs as I'm not sure if I'm following your logic corectly. :P

http://javascript.info/tutorial/events-and-timing-depth