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