Как решить эту проблему jQuery

Question

У меня есть 2 divs друг над другом, в данный момент один отображается, а другой скрыт, скрипт должен отображать # div2, когда мышь входит в # div1 и должна показывать # div1, когда мышь листья # div2

проблема возникает, когда мышь входит в # div1 и уходит до того, как # div2 отображается, так что # div2 останется отображаться, но мышь оставила # div2 уже любая помощь?

Мой JQuery код:

$('#div1').mouseenter(function(){ 
$('#div1').fadeOut("fast",function(){ 
    $('#div2').fadeIn("fast"); 
}); 
}); 

$('#div2').mouseleave(function(){ 
$('#div2').fadeOut("fast",function(){ 
    $('#div1').fadeIn("fast"); 
}); 
}); 

Answer 1

Я предложил бы использовать hover() здесь:

$("#div1, #div2").hover(function() { 
    $(this).stop().fadeOut("fast"); 
}, function() { 
    $(this).stop().fadeIn("fast"); 
}); 

Примечание: Я использовал stop() на анимации, которая является хорошей привычкой, чтобы попасть в , Вышеупомянутая версия также позволяет обоим divs иметь один и тот же обработчик, что уменьшает ваш код.