鼠标悬停在jQuery的帮助下淡化具有相同类的其他元素

Question

我有几个div由css sprites组成的背景,它们都共享同一个类 - .picture.

当我将鼠标悬停在任何这些div上时,我需要所有其他.picturediv消失,所以基本上只有我在盘旋的div才会保持不褪色.

如果我没有徘徊在这些div上,我需要所有这些都被解散.

到目前为止我试过:

$(function() {      
        $(".picture").css("opacity","1.0");       
        $(".picture").hover(function () {     
                $(this).siblings().stop().animate({opacity: 0.5}, "fast");   
        },          
        function () {      
                $(".picture").stop().animate({opacity: 1.0}, "fast");       
        });   
});

但它不起作用.我怀疑它与这些嵌套的.picturediv干扰.siblings()选择器的方式有关,但无法自己解决:(

这是代码的小提琴 - http://jsfiddle.net/38eqH/1/.

Answer 1

var elems = $('.picture');
elems.on('mouseenter mouseleave', function(e) {
    elems.not(this).stop(true).fadeTo('fast', e.type=='mouseenter'?0.5:1);
});

小提琴