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

Answer 2

以 Digitlworld 的答案为基础

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

Answer 3

我将使用分配给缩略图的 CSS 类来实现 40% 的不透明度，另一个分配给 100% 不透明度的 CSS 类。

当我想让它们全部淡入时，我会使用 jQuery $(".thumb40") 或类似的东西来选择淡出的，并将它们的 CSS 类设置为 。 thumb100 使用 jQuery 函数在类之间进行淡入淡出。 jQuery toggleClass

要淡出除当前之外的所有内容，请使用类似的 jQuery，.thumb100 code> 但输入检查代码以确保您要更改为 .thumb40 的代码不是您选择的代码。

至于点击离开，我自己也很好奇。

Answer 4

像这样修改你的 jQuery：

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

这是一个工作示例 jsFiddle