Jquery在缩略图上设置不透明度动画，除了选中的那个答案

【问题标题】：Jquery animate opacity on thumbnails except for the one selectedJquery在缩略图上设置不透明度动画，除了选中的那个
【发布时间】：2011-07-03 20:53:07
【问题描述】：

我有一组缩略图，我想在选择另一个缩略图时将其缩小到 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>

谢谢！

【问题讨论】：

标签： jquery toggle jquery-animate thumbnails

【解决方案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);
    });   
});

【讨论】：

我觉得不错。我仍然会亲自使用该类作为选择器（然后使用 not() 删除单击的项目）而不是兄弟姐妹，以防页面结构的更改在将来阻止它工作。
就个人而言，我也会。我只是让它尽可能与原版相似。
有效！干得好特塞雷克斯。在淡出事件期间，您可以添加一个 cursor:pointer 到 body 的任何机会......我喜欢将该区域显示为可点击。
应该可以加 $(body).css('cursor', 'pointer');到缩略图点击事件。然后 $(body).css('cursor', '');在正文中单击。

【解决方案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');
});

【讨论】：

我认为 Digitlworld 建议使用 toggleClass 来获得淡入淡出效果，否则它会起作用。
确实是。我的意思是，有很多方法可以做到这一点，我敢肯定，我只是想做一个快速的 jQuery 方法。
如果他们单击另一个块元素，$(body).click 解决方案会起作用吗？我认为它依赖于事件冒泡？
它确实依赖于冒泡，所以只要其他元素没有 stopPropagation 就可以工作。
它适用于没有自己的点击事件的任何东西，其中调用了 stopPropagation。该死的@Tesserex，打败我！ :D

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案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

【讨论】：

该部分有效，但他还希望单击页面上的任意位置以将它们全部恢复到 100%。
[更新] 谢谢，这在另一个方面很有帮助。当您在拇指本身之外单击时，我也有兴趣让所有拇指弹回 100%。这需要为容器设置图像叠加层吗？
我将修改小提琴以包括单击其他地方以将不透明度恢复为 100%。