Как использовать 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 класс для всех остальных, но не тот, который я парю с помощью мыши.

есть идеи?есть ли другой способ сделать это?

---

edit:

спасибо вам за все, что я придумал:

$(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).siblings().addClass('fade');
}, function() {
    $(this).siblings().removeClass('fade');
});​

JSFiddle DEMO

Answer 2

Попробуйте это.

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

Answer 3

Хорошо, если вы хотите, чтобы он выполнялся немного быстрее, используйте on() вместо:

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

Answer 4

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

Answer 5

Нечто подобное должно делать. используйте hover ():

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

});