jQuery mouseleave fast

Question

Je donne ici un cas simplifié. J'ai 2 divs l'un sur l'autre. Lorsque mouseenter le premier (bleu) fadeOut et l'un derrière (rouge) fadeIn. Quand mouseleeve tout vient à la situation originale.

Cela fonctionne bien. Le seul problème vient quand l'utilisateur mouseleeve rapide, probablement quand le div supérieur (bleu) est toujours là. Comment cela peut-il arriver à la situation d'origine dans ce cas?

Vous pouvez vérifier votre réponse ici: http://jsfiddle.net/Narcis/ywTBe/

HTML:

<div id="blue"></div> 
<div id="red"></div> 

CSS:

#blue{ 
    position:absolute; 
    top:100px; left:100px; 
    width:100px; height:100px; 
    background:blue; 
    z-index:1; 
} 

#red{ 
    position:absolute; 
    top:100px; left:100px; 
    width:100px; height:100px; 
    background:red; 
    z-index:0; 
} 

JQUERY:

$(function() { 
    $("#blue").mouseenter(function() { 
     $("#blue").fadeOut("normal"); 
     $("#red").fadeIn(); 
    }); 

    $("#red").mouseleave(function() { 
     $("#blue").fadeIn("normal"); 
     $("#red").fadeOut(); 
    }); 
}) 

Answer 1

Vous pouvez le faire fonctionner comme ça -

Html

<div id='wrapper'> 
    <div id="blue"></div> 
    <div id="red"></div> 
</div> 

Js

$(function() { 
    $("#wrapper").mouseenter(function() { 
     $("#blue").stop(true, true).fadeOut("normal"); 
     $("#red").stop(true, true).fadeIn(); 
    }); 

    $("#wrapper").mouseleave(function() { 
     $("#blue").stop(true, true).fadeIn("normal"); 
     $("#red").stop(true, true).fadeOut(); 
    }); 
}); 

Démo --->http://jsfiddle.net/ywTBe/1/

Answer 2

Voici le jsFiddle: http://jsfiddle.net/JZSRk/

 $(function(){ 
     $("#blue").mouseenter(function() { 
      $("#blue").fadeOut("normal"); 
      $("#red").fadeIn(); 
     }); 
     $("#blue").mouseleave(function() { 
      $("#blue").fadeIn("normal"); 
      $("#red").fadeOut(); 
     }); 
     })