Jquery simultaneous event relations

Question

I can't figure out how to achieve an unbind on an event from another event when they are triggered simultaneous. I have this kind of html hierarchy:

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

When the mouse enter .first, .second is shown. Then, if mouse leave .first, .second should hide, except if the mouse is entering .second. So, my problem is that $('.first').mouseleave() & $('.second').mouseenter() are triggered at the same time. I tried something like this, with no results:

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

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

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

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

Any clues?

Here is the example: 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