JQuery .fadeIn() supprime les niveaux lors de la dissimulation et de la restitution d'un élément

Question

Je conçois donc un site Web (en utilisant WordPress), et je veux utiliser JQuery pour masquer/montrer un élément quand un autre élément est déplacé. Le code HTML ressemble à peu près comme ceci

<div class="post" style="clear:both;"> 
    <a href="..."> 
     <img src="..." /> 
    </a> 
    <div class="autohide"> 
     <h3> 
      <a href="...">...</a> 
     </h3> 
     <p>....</p> 
    </div> 
</div> 
... 
<div class="spacer" /> 

et JQuery ressemble à ceci:

jQuery(document).ready(function(){ 
    jQuery(".post .autohide").hide();` 
    jQuery(".post").hover(function() { 
     jQuery(this).nextAll(".spacer").first().stop().html(jQuery(this).children(".autohide") 
      .html()).fadeIn(); 
    },function() { 
     jQuery(this).nextAll(".spacer").stop().show().fadeOut().html("").hide(); 
    }); 
}); 

Ce qui est censé se produire, lorsque la souris de l'utilisateur sur l'image, le contenu du autohide associé <div> obtenir transplanté dans l'intercalaire suivant <div>, puis a disparu; quand ils sortent la souris, le masquage automatique <div> disparaît et efface. Toutefois, si le pointeur n'est pas sur l'image pendant le temps de fondu complet, alors l'opacité maximale de la div d'espacement semble diminuer jusqu'à ce qu'un survol ne crée aucun effet.

Je serais très obligé si quelqu'un qui sait plus de JQuery que moi pourrait faire la lumière sur ce sujet; Je suppose que c'est un problème de base (je n'ai jamais utilisé JQuery avant ce projet).

Merci d'avance.

Answer 1

J'ai pris les appels .stop(), et ça semble fonctionner, mais j'essaie toujours d'analyser tout ce qui se passe.

http://jsfiddle.net/f3EJ3/