javascript - JavaScript 画像のロールオーバー

Question

こんにちは、画像のロールオーバーについて質問がありますが、それはあなたの考えではありません。

http://www.asos.com/の例を見て、ホームボタンをクリックします (一番左のナビゲーション) 。

画像をロールオーバーすると、その画像が強調表示されたままになり、他の画像が暗くなることがわかります。

これがjqueryで行われたことは知っていますが、コードは非常に面倒です。誰もこれを見たことがありますか、それを行う方法を知っていますか?

ありがとう

Answer 1

まず第一に、Firebug はあなたの友達です。採用されている手法は、想像以上に単純です。画像の不透明度を 0.3 に下げるだけです。背景が黒いため、画像が暗くなります。したがって、コードは次のようになります。

$('img.fade').live('mouseover', function (e) {
    var $this = $(this).fadeTo(500, 1.0);
    $('img.fade').not($this).fadeTo(500, .3);
);
$('img.fade').live('mouseout', function (e) {
    var $this = $(this);
    $('img.fade').not($this).fadeTo(500, 1.0);
);

Answer 2

迅速な解決策（もっと短く調整できると思います）：

<div class="images">
    <img src="http://www.google.com/google.jpg" />
    <img src="http://www.google.com/google.jpg" />
    <img src="http://www.google.com/google.jpg" />
    <img src="http://www.google.com/google.jpg" />
</div>

<script type="text/javascript">
$().ready(function(){
    $('.images img').hover(
        function(){
            $(this).parents('.images').find('img').not(this).animate({"opacity": "0.3"}, 200);
            $(this).animate({"opacity": "1"}, 200);
        }, 
        function(){
            $(this).animate({"opacity": "1"}, 200);
        }
    );
$('.images').bind('mouseleave',function(){$(this).find('img').animate({"opacity": "1"}, 200);});
});