JQueryサムネイルホバーの強調表示（他のサムネイルを隠して）

Question

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

• する各サムネイルはなく推移した1を介して各サムネイル
• 反復への参照を取得し、不透明度の値を変更

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

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

Answer 1

あなたのアプローチが正しいか、（あなたはもちろんの1を望んでいない限り）しかし、私はタイムアウトの必要性を見ない

あなたのロジックは、このような何かに変換：

$("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/

Answer 2

あなたはjqueryのmousenterを使用し、同じロジック

STEP1 implmentするmouseleaveことができます。http://api.jquery.com/mouseenter/

はSTEP2：使用jQueryのこれを、あなたは、各レコードに必要な詳細を取得し、これは詳細を取得します現在のオブジェクトのすべてのプロパティのことができます。

そしてプロパティの

STEP3http://api.jquery.com/css/

Answer 3

を設定するためのjQueryの.cssプロパティのそれぞれがopacityを設定し、mouseoverを適用するためのjQueryを使用し、次いで、（例えば.thumbnail用）クラスサムネイル与え、使用各へmouseoutイベント：

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

あなたはこのでこの作業を見ることができます210。