如何使用jquery淡出除選定元素之外的任何內容？

Question

我有這樣的設計了幾個li元素：

echo '<ul>'; 
foreach ($test as $value){ 
echo '<li class="li_class">.$value['name'].</li>'; 
} 
echo '</ul>'; 

這會給我：

<li class="li_class">name1</li> 
<li class="li_class">name2</li> 
<li class="li_class">name3</li> 
... 

我想做的事情是，當我懸停在li元素的所有其他li元素褪色大約有50％。

我能有2類和使用jQuery來改變他們：

.li_class{ 
background: #ccc; 
} 

.fade{ 
opacity: .5; 
} 

鑽我不知道如何告訴jQuery來的.fade類添加到所有其他利，但不是一個我與徘徊鼠標。

什麼想法？有沒有另一種方法呢？

---

編輯：

的感謝，我想出了這一點：

$(document).ready(function() { 
    $('.li_class').hoverIntent(function(){ 
     $(this).removeClass('fade').siblings().animate({ opacity: 0.5 }, 500); 
    },function(){ 
     $(this).siblings().andSelf().animate({ opacity: 1 }, 100); 
    }); 
}); 

使用hoverIntent插件。

Answer 1

試試這個。

$('.li_class').hover(function(){ 
    $(this).removeClass('fade').siblings().addClass('fade'); 
},function(){ 
    $(this).siblings().andSelf().removeClass('fade'); 
}) 

Answer 2

$('.li_class').hover(function() { 
    $(this).siblings().addClass('fade'); 
}, function() { 
    $(this).siblings().removeClass('fade'); 
});​ 

JSFiddle DEMO

Answer 3

這樣的事情應該做的。使用懸停（）：

$('li.li_class').hover(function(){ 
$('li.li_class').not(this).animate('slow',{opacity: 0.5}); 
}, 
function(){ 
$('li.li_class').animate('slow',{opacity: 1}); 

}); 

Answer 4

$(".li_class").hover(function(){ 
    $(".li_class").not(this).fadeOut('slow', .5); 
}); 

Answer 5

那麼，如果你想要做它稍快執行使用on()代替：

$(".li_class").on("mouseenter", function() { 
    $(this).siblings().addClass("fade"); 
}).on("mouseleave", function() { 
    $(this).siblings().removeClass("fade"); 
});