0

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


}
4

3 回答 3

2

我认为您可以将第二个回调传递给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.

});
于 2012-10-10T11:04:17.303 回答
0

还要看看.stop()

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

于 2012-10-10T11:16:42.057 回答
0

迟到的回复，但根据官方文档进一步解释，.hover()绑定.mouseenter()和.mouseleave()处理程序。

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

于 2014-08-27T04:49:20.123 回答