JQuery slideup/slidedown triggering when hidden element animates

Question

I'm using JQuery on a Wordpress page to animate a hidden element on a mouseenter event. The hidden element is a text block that slides down when the mouse enters a div containing a thumbnail of a image. I have the animation working but when the hidden element slides down it triggers the mouseleave function which slidesUp the elemnet giving undesirable yo yo effect. Does anyone know how to tell JQuery to ignore the element that slides down so that the mouseleave function isn't called unless the mouse actually leaves the element that has the thumbnail. The result can be seen here:

http://jeremypiller.com/wordpress

Any help would be appreciated.

Here's the CSS (I'm manipulating the WordPress Generated Classes):

.wp-caption { 
    position:relative;
    width:150px;
    height:150px;
    color:#000;
    text-align:center; 
 }

.wp-caption img {
            position:absolute;
            width:150px;
            left:0px;
            top:0px;
 }


  .wp-caption p.wp-caption-text {
            font-size: 1em;
            line-height: 17px;
            width:150px;
                background-color:#fff;
            display:none;
            cursor:pointer; 
            margin:0;
            height:100px;
            position:absolute;
            left:0px;
            top:0px;
                opacity:0.8;
}

The HTML:

<div id="attachment_61" class="wp-caption alignnone" style="width: 160px">
<a rel="lightbox[roadtrip2]" href="http://jeremypiller.com/wordpress/wp-content/uploads/2011/01/enlarge_water.jpg">
<img class="size-thumbnail wp-image-61" title="enlarge_water" src="http://jeremypiller.com/wordpress/wp-content/uploads/2011/01/enlarge_water-150x150.jpg" alt="" width="150" height="150" />
</a>
<p class="wp-caption-text">Is this where the wp-caption gets added?</p>
</div>

And the JQuery:

jQuery(document).ready(function(){
     $(".wp-caption").each(function () {
    var $this = jQuery(this);

            jQuery(".wp-caption-text").hide();

    jQuery("img.size-thumbnail", $this).stop().mouseenter(function () {
    jQuery(".wp-caption-text", $this).slideDown('slow');
    }).mouseleave(function () {
            jQuery(".wp-caption-text", $this).slideUp('slow');
        });
        });
        });

Answer 1

Although Harold's method ended up not working as per my comment he did get me thinking that the mouseleave event didn't necessarily have to be tied to the same element that triggered the mouseenter event. Here's the JQuery code that is now performing as I'd hoped:

jQuery(document).ready(function(){
    jQuery(".wp-caption").each(function () {
    var $this = jQuery(this);

            jQuery(".wp-caption-text").hide();

    jQuery("img.size-thumbnail", $this).stop().mouseenter(function () {
    jQuery(".wp-caption-text", $this).slideDown('slow');
    });
    });
    });

jQuery(document).ready(function(){
    jQuery(".wp-caption").each(function () {
    var $this = jQuery(this);

    jQuery(".wp-caption.alignnone").stop().mouseleave(function () {
    jQuery(".wp-caption-text", $this).slideUp('slow');
    });
            });
            });

This code could probably be shortened and would look similar to my original code.

Answer 2

Instead of a mouseleave event, let it be a new mouseenter event that is tied to the body. Prevent this event from bubbling up from both the image and the text beneath. You can stop bubbling with the event.stopPropagation() method:

http://api.jquery.com/event.stopPropagation/