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

Posted 2023-05-08

【中文标题】Jquery在缩略图上设置不透明度动画，除了选中的那个

【英文标题】：Jquery animate opacity on thumbnails except for the one selected

【发布时间】：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>

谢谢！

【参考方案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%。