2

http://www.rockstargames.com/lanoire/の 3 番目のボックスで見つけた効果を再現しようとしています。サムネイル同士をホバリングすると暗くなります。これを実装するには、標準の JavaScript で onMouseOver イベントを次のように処理します。

  • 各サムネイルへの参照を取得する
  • ホバーされたサムネイル以外の各サムネイルを繰り返し、不透明度の値を変更します

そして、タイムアウトを設定して onMouseOut イベントを処理し、その後すべてのサムがリセットされます。

私の問題は、JQuery の知識がほとんどなく、私のアプローチが正しいかどうかわからないことです。コードを書き始めて、フレームワークと議論してしまうようなことはしたくありません。何か提案はありますか？

4

3 に答える 3

2

あなたのアプローチは正しいですが、タイムアウトの必要性はわかりません（もちろん、タイムアウトが必要な場合を除きます）

あなたのロジックは次のように変換されます。

$("img").hover(function () {
    /* Dim everything but this img: */
    $("img").not(this).stop().animate({ opacity: 0.5 });
}, function () {
    /* animate all images back to fully visible. */
    $("img").stop().animate({ opacity: 1.0 });
});

すべての画像は、ページを読み込んでマウスを離すと表示されます。ホバーされた画像以外の画像は淡色表示されます。

これが実際の例です: http://jsfiddle.net/SJ7bp/

于 2011-07-04T22:52:28.850 に答える
0

jquery mousenter と mouseleave を使用して同じロジックを実装できます

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

step2: jquery の this を使用して、各レコードに必要な詳細を取得します。これにより、現在のオブジェクトの詳細が取得され、すべてのプロパティを取得できます。

次に、jquery .css プロパティを使用して、プロパティの

step3 http://api.jquery.com/css/

于 2011-07-04T22:39:40.620 に答える
0

各サムネイルにクラス (例: .thumbnail) を指定し、jQuery を使用して を設定し、およびイベントをそれぞれにopacity適用します。mouseovermouseout

$(".thumbnail").css("opacity", "0.5").mouseover(function() {
     $(this).css("opacity", "1.0"); 
}).mouseout(function() {
     $(this).css("opacity", "0.5");  
});

この例の fiddleでこれが機能していることを確認できます。

于 2011-07-04T22:42:28.777 に答える