Hello 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 jqurey code

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

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