Рекомендации по mouseover и mouseleave

[vyshik]

есть такой код

<style>
    #do-1 {display:none;position: absolute;}
    #posle-1 {position: absolute;}
 </style>
<div class="gallery-rr-index"> 				 
      <div class="gallery-r-img-index" id="do-1"> 					 
        <div class="gallery-r-img-text-index">до</div>
       	<img class="preview_picture" border="0" src="" width="132" height="99"   />		
       </div>
       <div class="gallery-r-img-index" id="posle-1> 					 
        <div class="gallery-r-img-text-index">после</div>
       	<img class="preview_picture" border="0" src="" width="132" height="99"  />		
       </div>
   </div>

<script>
$('#posle-1').mouseover (function(){
  $('#posle-1').fadeOut(600);
  $('#do-1').fadeIn(600);
 });

$('#do-1').mouseleave(function(){
  $('#do-1').fadeOut(600);
  $('#posle-1').fadeIn(600);
  
});
</script>

то есть как видно при на ведении на один див он прячется и появляется другой , и обратно если убрать мышь второй прячется а первый появляется , у проблема в том что если резко мышью провести то 1 див прячется 2 показывается , а обратно не хочет меняться( как можно это исправить ?Спасибо
наглядный пример тут