On mouseover fade other elements with same class with the help of jQuery

Question

I have couple of divs with background made of css sprites, they all share the same class - .picture.

When I hover over any of these divs I need all the other .picture divs to fade, so basically only the div I am hovering over will stay not faded.

If I am not hovering over these divs, I need all of them to be unfaded.

so far I tried:

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

but it doesn't work. I suspect it has something to do with the way these nested .picture divs interfere with .siblings() selector, but can't figure it out on my own :(

Here is the fiddle with the code - 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);
});

FIDDLE

Answer 2

I have the exact same effect on my portfolio page on my website. http://somdow.com/portfolio.php

here is my code, you should get the gist of it.

$('.portThumbsL ,  .portThumbsR').hover(function(){

    //ANIMATIONS FOR THE THUMBS
    $('.portThumbsL,  .portThumbsR').not(this).animate({opacity:.2},{queue:false,duration:500});
    //$(this).css("cursor","crosshair");
    }, 
    function(){
        $(this).children('.portSecRollOver').css("display","none");
    $('.portThumbsL,  .portThumbsR').not(this).animate({opacity:1},{queue:false,duration:500});
 });

Hope this helps or steers you in the right direction. Good luck