JQuery .fadeIn() levelt aus, wenn ein Element versteckt und wieder angezeigt wird

Question

Also entwerfe ich eine Website (mit WordPress), und ich möchte JQuery verwenden, um ein bestimmtes Element zu verstecken/anzuzeigen, wenn ein anderes Element maused wird. Der HTML-Code sieht ungefähr so ​​

<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" /> 

und die JQuery sieht wie folgt aus:

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(); 
    }); 
}); 

, was passieren soll, wenn der Benutzer den Mauszeiger über das Bild, wird der Inhalt des zugehörigen autohide <div> transplantiert bekommen in den nächsten Abstandhalter <div> und dann eingeblendet; Wenn sie aus der Maus ziehen, blendet die Autohülle <div> aus und wird gelöscht.

Wenn jedoch der Zeiger nicht für die vollständige Einblendzeit über dem Bild ist, scheint die maximale Opazität des Abstandshalter-DIV zu sinken, bis ein Mouse-Over überhaupt keinen Effekt erzeugt.

Ich wäre sehr dankbar, wenn jemand, der mehr JQuery kennt, als ich etwas Licht auf dieses Thema werfen könnte; Ich nehme an, dass es ein grundlegendes Problem ist (ich habe JQuery vor diesem Projekt noch nie benutzt).

Vielen Dank im Voraus.

Answer 1

Ich nahm die .stop() Anrufe, und es scheint gut zu funktionieren, aber ich versuche immer noch alles zu analysieren, was vor sich geht.

http://jsfiddle.net/f3EJ3/