Слайд-слайд JQuery запускается при анимации скрытого элемента

Question

Я использую JQuery на странице Wordpress для анимации скрытого элемента при событии mouseenter. Скрытый элемент - это текстовый блок, который скользит вниз, когда мышь вводит элемент div, содержащий миниатюру изображения. У меня есть анимация, работающая, но когда скрытый элемент скользит вниз, он запускает функцию отпускания мыши, которая перемещает вверх элемент, давая нежелательный эффект йо-йо. Кто-нибудь знает, как сказать JQuery игнорировать элемент, который скользит вниз, чтобы функция mouseleave не вызывалась, если мышь фактически не покидает элемент, имеющий миниатюру. Результат можно увидеть здесь:

http://jeremypiller.com/wordpress

Любая помощь будет оценена.

Вот CSS (я манипулирую сгенерированными классами WordPress):

.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;
}

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>

И 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

Вместо события mouseleave пусть это будет новое событие mouseenter, привязанное к телу. Не позволяйте этому событию пузыриться как на изображении, так и на тексте под ним. Вы можете прекратить пузыриться с помощью метода event.stopPropagation():

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

Answer 2

Хотя метод Гарольда в итоге не сработал согласно моему комментарию, он заставил меня подумать, что событие mouseleave не обязательно должно быть связано с тем же элементом, который вызвал событие mouseenter. Вот код JQuery, который теперь работает так, как я надеялся:

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

Этот код, вероятно, может быть сокращен и будет похож на мой оригинальный код.