Jquery 动画缩略图上的不透明度(所选缩略图除外)

Question

我有一组缩略图，希望在选择另一个缩略图时将其缩小到 40%。原始缩略图将保持 100% 不透明度。我需要对淡出的缩略图进行全面释放，以便单击页面上的任意位置将使其他缩略图恢复到 100% 不透明度。

这是演示: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>

谢谢!

Answer 1

将你的javascript更改为此(我认为这是你想要的行为，你的问题对我来说并不是100%清楚):

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