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のメソッドに 2 番目のコールバックを渡すことができると思います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

返信が遅くなりましたが、公式ドキュメントに従ってさらに説明すると、とハンドラーの両方が.hover()バインドされます。.mouseenter().mouseleave()

したがって、マウスが要素に「入った」ときにのみ効果を発生させたい場合は、.mouseenter()代わりに.hover().

于 2014-08-27T04:49:20.123 に答える
0

.stop()も見てください

一部の要素の進行中のアニメーションを無効にするには、.stop() を使用してすぐにキャンセルできます。複数のアニメーションがキューに入っている場合に役立つことがあります。

于 2012-10-10T11:16:42.057 に答える