Jquery为缩略图（选定缩略图除外）设置不透明度动画

我有一组缩略图，当选择另一个缩略图时，我希望将其减少到40%。原始缩略图将保持100%不透明度。我需要有一个通用版本的淡出缩略图，以便在页面上的任何地方点击将使其他拇指回到100%不透明

以下是演示：

Js:

HTML

---

谢谢

我会使用一个CSS类为缩略图指定40%不透明度，另一个为100%不透明度

当我想淡入所有内容时，我会使用jQuery

$（“.thumb40”）

或类似的工具来选择淡入的内容，并使用jQuery函数在类之间淡入，将它们的CSS类设置为

.thumb100

要淡出除当前代码外的所有代码，请使用类似的jQuery，

.thumb100

，但要检查代码，以确保要更改为

.thumb40

的代码不是您正在选择的代码

---

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

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

---

下面是一个基于DigitWorld答案的工作示例

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

---

将您的javascript更改为（我认为这是您想要的行为，您的问题对我来说不是100%清楚）：

---

我认为DigitWorld建议使用toggleClass来获得淡入淡出的效果，但除此之外它是有效的。事实上，我是。我的意思是，有很多方法可以做到这一点，我确信，我只是想做一个快速的jQuery。如果他们单击另一个块元素，那么$（body）单击解决方案是否有效？我假设它依赖于事件冒泡？它确实依赖于冒泡，因此只要其他元素没有StopRopAgation，它就可以工作。它可以工作在任何没有自己的click事件的元素上，StopRopAgation在内部调用。该死的@Tesserex，打败我吧！：D这部分工作正常，但他还希望点击页面上的任意位置，将它们全部恢复到100%。[更新]谢谢，这在另一方面非常有用。我也很感兴趣的是，当你点击拇指外侧时，所有的拇指都会回复到100%。这需要在容器上设置一个图像覆盖吗？我会修改小提琴，包括点击其他地方，将不透明度恢复到100%。看起来不错。我个人仍然会使用该类作为选择器（然后使用not（）删除单击的项），而不是同级，以防页面结构的更改在将来停止工作。我个人也会这样做。我只是尽可能地保持它与原作的相似。很好！干得好，泰塞雷斯。您是否有可能在淡出事件期间添加光标：指向主体的指针。。。我喜欢显示可点击的区域。应该只能够添加$（body.css（'cursor'，'pointer'）；单击缩略图事件。然后是$（body.css（'cursor'，''）；在正文中单击。

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

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

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