Jquery animate opacity on thumbnails except for the one selected

I have a set of thumbnails that I want to reduce to 40% when another thumbnail is selected. The original thumbnail will remain at 100% opacity. I need to have a general release for the faded out thumbnails, so that a click anywhere on the page will bring the other thumbs back to 100% opacity.

Here is the demo: http://www.dumstr.com/sofeb11/stash/

Js:

$(function() {           
    $("div#fadeout .stashthumb").click(function () {             
            $(this).siblings().stop().animate({opacity: 0.4}, 300);   
    },          
    function () {      
            $("div#fadeout .stashthumb").stop().animate({opacity: 1.0}, 300);       
    });

HTML

<div id="fadeout" class="stasher">

     <div style="opacity: 1;" class="stashthumb">
     <span><a href="#"><img src="img/stash-01.jpg"><开发者_开发知识库/a></span>
     </div>
</div>

Thanks!

Change your javascript to this (I think it's the behavior you want, you're question isn't 100% clear to me):

$(function() {           
    $("div#fadeout .stashthumb").click(function (event) {             
        $(this).siblings().stop().animate({opacity: 0.4}, 300);       
        $(this).stop().animate({opacity: 1.0}, 300); 
        event.stopPropagation();     // don't fire the body click handler
    });

    // here's the "anywhere on the page" part you wanted
    $("body").click(function() {
        $("#fadeout .stashthumb").stop().animate({opacity: 1.0}, 300);
    });   
});

Building on Digitlworld's answer

$("div#fadeout .stashthumb").click(function (e) {
    e.stopPropagation(); // This will stop the click bubbling up to the body
    $(this).removeClass('thumb40').addClass('thumb100');
    $('.stashthumb').not(this).removeClass('thumb100').addClass('thumb40');
});

$(body).click(function() {
    $('.stashthumb').removeClass('thumb40').addClass('thumb100');
});

I'd use a CSS class assigned to thumbnails for 40% opacity, another for 100% opacity.

When I want to fade all of them back in, I'd use a jQuery $(".thumb40") or something like that to select the faded ones and set their CSS class to .thumb100 using the jQuery function for fading between classes. jQuery toggleClass

To fade all but the current one, use a similar jQuery, .thumb100 but put check code to make sure the one you're changing to .thumb40 isn't the one you're selecting.

As for the click away, I'm curious about that myself.

Modify your jQuery like this:

    $("div#fadeout .stashthumb").click(function (e) {
    $(".stashthumb").animate({opacity: 1},300);    
            $(this).siblings().stop().animate({opacity: 0.4}, 300);   
            e.stopPropagation();
    });
$("body #fadeout:not(.stashthumb)").click(function () {
    $(".stashthumb").animate({opacity: 1},300);
});

Here's a working example jsFiddle