如何防止效果在jquery中重复出现？答案

【问题标题】：How to prevent effect repeat onmouse out in jquery?如何防止效果在jquery中重复出现？
【发布时间】：2012-10-10 10:56:52
【问题描述】：

我在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;


}

【问题讨论】：

stackoverflow.com/questions/1116361/jquery-hover-mouse-out 这是答案

标签： jquery hover

【解决方案1】：

我认为您可以将第二个回调传递给jQuery 的hover 方法。

$('.element').hover(function(){
    // this will get executed when you hover the element

}, function() {
    // this will get executed when you leave the element
    // So, you can stop any effect here.

});

【讨论】：

【解决方案2】：

也可以看看.stop()

要禁用某些元素的持续动画，您可以使用 .stop() 立即取消它。当多个动画在队列中时，它有时会有所帮助。

【讨论】：

【解决方案3】：

回复较晚，但根据official documentation 进一步解释，.hover() 绑定.mouseenter() 和.mouseleave() 处理程序。

因此，如果您希望仅在鼠标“进入”元素时出现效果，只需使用.mouseenter() 而不是.hover()。

【讨论】：