Question

我在jquery中使用悬停功能有效，问题是当鼠标离开元素时效果重复。

当鼠标放弃元素而不是重复效果时，如何防止发生相同的效果？

效果是一张闪耀的图像，当它悬停在另一张图像上时滑过，这里是我的代码：

jQuery(document).ready(function() {    
 /* When a thumbnail is hovered over do shine */
$('.large_thumb').hover(function()
{
    $(this).find(".large_thumb_shine").stop().css("background-position","-99px 0");

    $(this).find(".large_thumb_shine").stop().animate({ backgroundPosition: '99px 0'},700); 

});

HTML：

<div class="large_thumb">
<img src="images/thumbnails/sample2.jpg" class="large_thumb_image" alt="thumb" />
<div class="large_thumb_shine"></div>
</div>

CSS：

.large_thumb{
width:74px; height:74px;
border:solid black 2px;
}
img.large_thumb_image{
position:absolute;
}
.large_thumb_shine    {
width:74px; height:74px;
background:url(images/interface/shine.png) no-repeat;
position:absolute;
background-position:-99px 0;


}

Answer 1

我认为您可以将第二次回调传递给jQuery的{{1}}方法。

hover

Answer 2

另请查看.stop()

要禁用某些元素的持续动画，您可以使用.stop（）立即取消它。在有几个动画排队的情况下，它有时会有所帮助。

Answer 3

延迟回复，但要根据official documentation进一步解释，.hover()会对.mouseenter()和.mouseleave()处理程序进行绑定。

因此，如果您希望仅在鼠标“输入”元素时才会产生效果，只需使用.mouseenter()代替.hover()。

如何在jquery中防止效果重复onmouseout？

3 个答案: