jQueryスタイルのエフェクト - 他のボックスをフェードアウト

Question

私は次のようなものを作成しようとしていました：http://jquerystyle.com/index.php - ロールオーバー時にクラスを設定し、もう一方がフェードアウトするとき、リソースを聞いたことがある人はいますか？

Answer 1

これは正確に何をしたい、おそらくです：

jQuery fading/dimming other list elements when one is hovered over, I'm 90% there..?

It includes an example.

（当然ですが、私はちょっと偏っていますが、あなたがやろうとしていること）

Answer 2

プラグインなどは必要ありません。単純である必要があるためです。

要素を格納するために順序付けられていないリストを使用していて、その要素に "nav"というIDを付けるとします。

ホバーイベントを使用してアイテムを「アクティブ」に設定し、他のアイテムを「非アクティブ」に設定します。

$(document.ready() { 
    $('ul#nav li').hover(function() { 
     $(this).closest('ul#nav').find('li').addClass('inactive'); 
     $(this).removeClass('inactive').addClass('active'); 
    }, 
    function() { 
     $(this).closest('ul#nav').find('li').removeClass('inactive');  
     $(this).removeClass('active'); 
    } 
}); 

あなたは今アクティブおよび非アクティブのクラスを使用して、それぞれのスタイルを設定することができます。チェーンに追加することで、各アイテムのフェード/その他のアニメーションを行うこともできます。

Answer 3

これはあなたを始めなければなりません。

Javascriptを：

$(function() { 
    $(".InnerBox").hover(function() { 
     $(this).css('color', 'black').siblings(".InnerBox").css('color', 'gray') 
    }); 
    $(".OuterBox").mouseout(function() { 
     $(this).find(".InnerBox").css('color', 'black') 
    }); 
}); 

HTML

<div class="OuterBox"> 
    <div class="InnerBox">1</div> 
    <div class="InnerBox">2</div> 
    <div class="InnerBox">3</div> 
    </div> 

Answer 4

http://docs.jquery.com/Effects/fadeOut http://docs.jquery.com/Effects/fadeIn

効果は 'フェードアウト' されているが、私はそれを行うための方法は、DIVに退色されるだろうと思います半透明の背景、黒半分のピクセルを有する。 > div要素は、暗い背景を有するものである。この

$(".box").hover(function() { 
    $(".box:not(:hover) > div").fadeIn("slow"); 
}); 

よう

のTryかないました。テストされていない、擬似コードとして扱い:)

Answer 5

これはおそらく、彼らはそのページ上でそれをやっているかのようになります。

$(function() { 
    $('img.fader').bind('mouseover',function() { 
     $(this).siblings('.fader').fadeOut('slow'); 
    }).bind('mouseout',function() { 
     $('img.fader').fadeIn('slow'); 
    }); 
});