隐藏和重新显示元素时，jQuery .fadeIn（）变为水平

Question

So I'm designing a website (using WordPress), and I want to use JQuery to hide/show a certain element when another element is moused over. The HTML looks roughly like this

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

and the JQuery looks like this:

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

What's supposed to happen is, when the user mouses over the image, the contents of the associated autohide <div> get transplanted into the next spacer <div> and then faded in; when they mouse out, the autohide <div> fades out and clears.

However, if the pointer is not over the image for the full fade-in time, then the max opacity of the spacer div seems to decrease until a mouse-over creates no effect at all.

I would be much obliged if anyone who knows more JQuery than I could shed some light on this subject; I assume it's a basic problem (I've never used JQuery before this project).

Thanks in advance.

Answer 1

I took the .stop() calls out, and it seems to work fine, but I am still trying to parse everything that is going on.

http://jsfiddle.net/f3EJ3/