jquery - 如何使用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');
})