1

画像ギャラリーでは、ホバーされていないすべての画像をグレースケールにしようとしています:

$('.featured_product_item').mouseover(function() {

    $('.featured_product_item').not(this).addClass('greyscale',200);

});

$('.featured_product_item').mouseout(function() {

    $('.featured_product_item').removeClass('greyscale',200);

});

ただし、最初のアニメーションが終了する前にマウスを別のアイテムに移動すると、スムーズではありません.どうすればより良い方法でそれを達成できますか?

4

2 に答える 2

1

と を試す必要が.mouseenter()あり.mouseleave()ます。

http://api.jquery.com/mouseenter/

http://api.jquery.com/mouseleave/

このmouseenterイベントは、マウスが要素の外側から要素の内側に変化したときにのみ発生します。についてはその逆ですmouseleave。

この方法では、マウスが移動して要素の上mouseoverにいるたびにイベントが発生するため、で見られるようにスタッタリング動作が表示されません。

于 2012-08-30T17:11:32.553 に答える
0

stop を使用したこの効果への何か

$(document).ready(function() {
  
    $(".featured_product_item").mouseover(function () {
        $('.featured_product_item').not(this).stop(true,true).addClass("selected", 1000);
    });
  
    $(".featured_product_item").mouseout(function () {
        $('.featured_product_item').stop(true,true).removeClass("selected",1000);
    });
  
});​

停止についてはjQueryのマニュアルを確認してください

これがこのためのJSFiddleです

ノート

addClass と removeClass を正しく使用しているかどうかわかりません。2番目のパラメーターにアニメーション時間を使用するマニュアルの参照は見つかりませんでした。マニュアルから：

.addClass(関数(インデックス、現在のクラス))

function(index, currentClass)既存のクラス名に追加される、スペースで区切られた 1 つ以上のクラス名を返す関数。セット内の要素のインデックス位置と既存のクラス名を引数として受け取ります。関数内では、これはセット内の現在の要素を参照します。

アップデート

間違った場所にいくつかのコードがあり、stop の余分なパラメーターを見逃していました。上記のコードと新しいjsfiddleを確認してください。

于 2012-08-30T13:44:34.093 に答える