jquery - 淡出所有的孩子，除了孩子被徘徊

試圖做一些相當簡單的事情，但它避開了我。我有以下的HTML：jquery - 淡出所有的孩子，除了孩子被徘徊

<div id="four"> 
       <div id="thumb1" class="suiting-thumb"> 
        <img src="img/gallery/suit1-thumb.jpg" alt="" title="" /> 
       </div> 


       <div id="thumb2" class="suiting-thumb"> 
        <img src="img/gallery/suit2-thumb.jpg" alt="" title="" /> 
       </div> 


       <div id="thumb3" class="suiting-thumb"> 
        <img src="img/gallery/suit3-thumb.jpg" alt="" title="" /> 
       </div> 
</div>

我想要做的是「昏暗」的父div的孩子，除了孩子被徘徊。我成功地這樣做與此jQuery的片段，但淡入淡出之間的短暫延遲輸出/輸入：

$('.suiting-thumb').hover(function() { 
       var thumbBtnIdPrefix = 'thumb'; 
       var thumbBtnNum = $(this).attr('id').substring((thumbBtnIdPrefix.length)); 
       $('.suiting-thumb:not(#thumb' + thumbBtnNum + ')').animate({ 
        "opacity": .3 
       }),200;    
      }, 
      function() { 
       $('.suiting-thumb').animate({ 
        "opacity": 1 
      }),200; 
     });

我覺得好像我需要通過選擇淡出父DIV的所有孩子#four與我的懸停聲明，但我不太確定如何做到這一點。任何幫助將非常感謝，謝謝！

來源

2011-05-24 nickff

請接受答案！ – 2011-05-24 20:56:21

問題是您要將新命令添加到動畫隊列中。您必須致電stop()，它會停止所有正在進行的動畫並立即啓動新動畫。

$('.suiting-thumb').hover(function() { 
    var thumbBtnIdPrefix = 'thumb'; 
    var thumbBtnNum = $(this).attr('id').substring((thumbBtnIdPrefix.length)); 
    $('.suiting-thumb:not(#thumb' + thumbBtnNum + ')').stop().animate({ 
     "opacity": .3 
    }), 200; 
}, function() { 
    $('.suiting-thumb').stop().animate({ 
     "opacity": 1 
    }), 200; 
});

http://jsfiddle.net/ywUUL/1/

來源

2011-05-24 20:38:24 DarthJDG

工作出色。謝謝達思！ – nickff 2011-05-24 20:45:51

達思 - 是否有任何優點使用fadeTo（）而不是animate（）？你知道一個人比另一個人快嗎？有一個想法是，fadeTo不依賴於「不透明」，有時在IE中不起作用。 – nickff 2011-05-24 21:09:02

'fadeTo（）'只是爲了方便，更容易記住。 jQuery規範化了對css屬性的訪問，所以你不必擔心IE下的不透明，它會在非標準的瀏覽器上做任何事情。它實際上在文檔中聲明，使用持續時間爲0的'fadeTo'與直接設置'.css（'opacity'，value）'相同。 – DarthJDG 2011-05-24 21:18:47

這應該做的伎倆：

$('.suiting-thumb').hover(function() { 
       $('.suiting-thumb').not(this).animate({ 
        "opacity": .3 
       },200); 

       $(this).animate({ 
        "opacity": 1 
       },200); 
     });

這樣的動畫並行執行。我還對選擇器進行了一些優化，使其更具可讀性，並且只對需要動畫的元素進行動畫處理。

請注意，您需要等待懸停動畫在下一個動畫開始前完成。如果您希望這是即時的，請確保調用$('.suiting-thumb').stop(true, false）立即停止所有動畫，然後開始下一個動畫。

來源

2011-05-24 20:46:34

jquery - 淡出所有的孩子，除了孩子被徘徊

回答

相關問題