how to solve this jquery problem
<p>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 ?</p>

<p>my jqurey code </p>

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

$('#div2').mouseleave(function(){
 $('#div2').fadeOut("fast",function(){
  $('#div1').fadeIn("fast");
 });
});
</code></pre>
