How to solve this jQuery issue

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 leave开发者_如何学编程s #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");
 });
});

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.