How to solve this jQuery issue

Question

I have 2 divs above each others, at a given moment one is shown and the other is hidden, the script should display #div2 when the mouse enters #div1 and should show #div1 when the mouse leaves #div2

the problem comes when the mouse enters #div1 and leaves before #div2 is displayed so the #div2 will stay displayed but the mouse has left #div2 already any help ?

My jQuery code:

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

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

Answer 1

I would suggest using hover() here:

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

Note: I've used stop() on the animations, which is a good habit to get into. The above version also allows both divs to have the same handler, which reduces your code.