【问题标题】: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 类设置为 .thumb100jQuery 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%。
      猜你喜欢
      • 2011-10-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-12-23
      • 2019-08-24
      • 2013-06-26
      • 2012-12-22
      相关资源
      最近更新 更多