jquery関数のすべての非アクティブなdivを選択する方法

Question

jQueryを学んでいるだけで、少しスクリプトを書こうとしています。基本的なHTMLコードまとめると：

<ul class="boxes"> 
<li id="box1">1</li> 
<li id="box2">2</li> 
<li id="box3">3</li> 
</ul> 

を私は、能動素子のホバー効果を作成するためにjQueryを使用しています：

$(document).ready(function(){ 
$('#box2').hover(function(){ 
    // In 
    $(this).text('IN') 
}, function(){ 
    // Out 
    $(this).text('OUT') 
}) 

私は何を追加すると、他のすべてのli要素ということです吊るされていないものは消え去る。私は、 'ul'クラスの "ボックス"に隠されていない "li"をすべて対象とする$（これ）とは反対のものがあるのだろうかと思っています。

私を助けることができる誰かに感謝します！ :)

Answer 1

をthisの反対は.not(this)次のようになります。

$('.boxes li').not(this).fadeOut(); 

はまた、このexampleを参照してください。

Answer 2

はこのお試しください：

$(document).ready(function(){ 
    $('.boxes li').hover(function(){ 
     $('.boxes li').not(this).fadeOut(); 
    }, function(){ 
     $('.boxes li').not(this).fadeIn(); 
    }) 
}); 

Answer 3

これは、私があなたが達成しようとしていると思うものの少しのサンプルです。

キーは、共通のクラス（この場合はbox）を使用するために、一意のid属性値を使用しています。

WORKING DEMO：http://jsfiddle.net/gkkta/3/

$('.box').hover(function(){ 
    $('.box').stop().fadeTo(500, .5); 
    $(this).stop().fadeTo(1000, 1.0); 
}, function(){ 
    $(this).stop().fadeTo(500, .5); 
}); 

Answer 4

他の方法があるにfadeoutallとfadeinthis

$('#box2').hover(function(){ 
     $('.boxes > li').fadeTo(100,.25); 
     $(this).text('IN').fadeTo(100,1); 
    }, function(){ 
    $('.boxes > li').fadeTo(100,1); 
    $(this).text('OUT'); 
}); 

フィドル：http://jsfiddle.net/n2Znw/1/