Jquery在縮略圖上的動畫不透明度除了所選的一個之外

我有一組縮略圖，當選擇另一個縮略圖時，我想縮小到40％。原始縮略圖將保持100％不透明度。我需要爲淡出的縮略圖製作一個常規發佈，以便在頁面上的任意位置點擊都可以讓其他大拇指回到100％不透明狀態。Jquery在縮略圖上的動畫不透明度除了所選的一個之外

以下是演示：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>

謝謝！

來源

2011-02-24 nutnics

改變你的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); 
    }); 
});

來源

2011-02-24 20:52:56 Tesserex

看起來不錯。我仍然親自使用該類作爲選擇器（然後使用not（）來移除被單擊的項目），而不是在同一頁面結構發生變化以阻止它在未來工作時同輩。 – 2011-02-24 21:00:11

我個人也是。我只是儘量保持原樣。 – Tesserex 2011-02-24 21:00:46

作品！做得很好Tesserex。任何你可以添加光標的機會：在淡出事件期間指向主體的指針......我喜歡將區域顯示爲可點擊。 – nutnics 2011-02-24 21:12:42

我會使用CSS類指定爲縮略圖40％不透明度，另一個100％不透明度。

當我想淡入淡出所有這些，我會使用jQuery $(".thumb40")或類似的東西來選擇褪色的，並使用jQuery函數將它們的CSS類設置爲.thumb100以在類之間淡化。 jQuery toggleClass

要淡入淡出所有當前項目，請使用類似的jQuery，.thumb100，但放入檢查代碼以確保您要更改爲.thumb40的那個不是您正在選擇的那個。

至於點擊，我很好奇自己。

來源

2011-02-24 20:47:25 digitlworld

修改您的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

來源

2011-02-24 20:51:32

該部分有效，但他也希望在頁面上的任意位置單擊以將其全部恢復至100％。 – Tesserex 2011-02-24 20:58:09

[已更新]感謝這在另一方面非常有幫助。當你點擊拇指本身之外時，我也有興趣讓所有的大拇指回到100％。這需要將圖像疊加層設置爲容器嗎？ – nutnics 2011-02-24 20:59:03

我將修改小提琴以包括點擊其他地方以將不透明度恢復到100％。 – 2011-02-24 21:01:19

大廈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'); 
});

來源

2011-02-24 20:52:24

我認爲Digitlworld建議使用toggleClass來獲得褪色效果，但否則會起作用。 – Tesserex 2011-02-24 20:54:01

的確我是。我的意思是，有很多方法可以做到這一點，我敢肯定，我只想做一個快速的jQuery。 – digitlworld 2011-02-24 20:56:02

如果點擊另一個塊元素，那麼$（body）.click解決方案會起作用嗎？我認爲它依賴於事件冒泡？ – digitlworld 2011-02-24 20:57:57

Jquery在縮略圖上的動畫不透明度除了所選的一個之外

回答

相關問題