Question

我在Wordpress页面上使用JQuery来为mouseenter事件上的隐藏元素设置动画。隐藏元素是一个文本块，当鼠标进入包含图像缩略图的div时，该文本块向下滑动。我有动画工作，但当隐藏元素向下滑动时，它会触发mouseleave功能，该功能会滑动elemnet，从而产生不良的溜溜效果。有没有人知道如何告诉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

尽管Harold的方法最终没有根据我的评论工作，但他确实让我认为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');
    });
            });
            });

此代码可能会缩短，看起来与原始代码类似。

当隐藏元素动画时，JQuery slideup / slidingown触发

2 个答案: