Случайные события JQuery

Question

Я не могу понять, как добиться развязки события от другого события, когда они запускаются одновременно. У меня есть такой HTML иерархии:

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

Когда мышь ввести .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

Таймауты!

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

Подстройте его под свои нужды, так как я не уверен, что я правильно следую вашей логике. : P

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