如何使用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 类添加到所有其他 li，但不是我用鼠标悬停的那个类。

有什么想法吗？还有另一种方法可以做到这一点吗？

---

编辑：

感谢大家，我想出了这个：

$(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 演示

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");
});