fadeOut（）僅適用於第一個：在僞元素之前

Question

我處於一個棘手的情況 - 我試圖構建一種真實的傳單，底部有可點擊的紙條。只是爲了一個視覺參考，是這樣的：http://static.someecards.com/someecards/images/feed_assets/4d657f7fa4817.jpg

我建立了一個空的div的傳單正文，我絕對定位在這個div的底部的「紙條」。然後，因爲我想在飛行員身體的底部添加一張「破紙」邊框圖像，所以我給了這些條帶一個負Z指數。

然後，爲了覆蓋撕破的紙邊框，我在它們的頂部放置了一個空的透明div，一個純色的僞元素會在CSS3動畫被觸發後消失（通過JS ）。

<div class="flyer-body"> 

    <div class="strip"></div> <!-- this will be animated via CSS3 --> 
    <div class="strip-wrapper"></div> <!-- this is a clone of the "strip" div, but transparent (made for z-index problems with animations). a click on this div will trigger the animation --> 

</div><!-- end flyer-body --> 

的jsfiddle供參考：http://jsfiddle.net/XR7LT/

正如你所看到的，我爲了輕輕地消失應用淡出（）效果僞元素。問題是，fadeOut（）只適用於第一個僞元素，而隱藏其他元素沒有任何影響。

問題顯示在Chromium和FF瀏覽器上，Ubuntu Linux 12.10。

任何想法？

在此先感謝。

Answer 1

你的CSS對所有元素都不一樣。 的過渡不應該在這兩個.strappamiX和.strappamiX換行，

我刪除它們從包裝：

.strappami1 { 
    display: block; 
    width: 100px; 
    height: 250px; 
    background: red; 
    z-index: -23; 
    position: absolute; 
    bottom: -200px; 
    left: 103px; 
    transition: all 2s ease-in; 
    -moz-transition: all 2s ease-in; 
    -webkit-transition: all 2s ease-in; 
    -o-transition: all 2s ease-in; 
} 

.strappami1-wrap { 
    display: block; 
    position: absolute; 
    width: 100px; 
    height: 250px; 
    bottom: -200px; 
    left: 103px; 
    background: transparent; 
} 

創建了小提琴的叉子在這裏： http://jsfiddle.net/sn6ZT/1/

Answer 2

我來到這裏Roise之後，但您應該能夠通過利用父子關係和添加多個類來顯着簡化您的解決方案。

http://jsfiddle.net/XR7LT/4/

當你有5個元素都應該有相同的行爲，使用相同的類爲所有這些，代碼適用於所有的人。然後你可以添加一些額外的類來移動附加的片段。

SIMPLER HTML

<section class="flyer"> 

    <div class="strappami-wrap w0"> 
     <div class="cover"></div> 
     <div class="strappami"></div> 
    </div> 

    <div class="strappami-wrap w1"> 
     <div class="cover"></div> 
     <div class="strappami"></div> 
    </div> 

    <div class="strappami-wrap w2"> 
     <div class="cover"></div> 
     <div class="strappami"></div> 
    </div> 

    <div class="strappami-wrap w3"> 
     <div class="cover"></div> 
     <div class="strappami"></div> 
    </div> 

    <div class="strappami-wrap w4"> 
     <div class="cover"></div> 
     <div class="strappami"></div> 
    </div> 
</section> 

SIMPLER CSS

.flyer { 
    display: block; 
    width: 900px; 
    height: 220px; 
    background: yellow; 
    margin: 0 auto; 
    position: relative; 
} 

.strappami { 
    display: block; 
    width: 100px; 
    height: 250px; 
    background: red; 
    z-index: -23; 
    position: absolute; 

    left: 0; 
    transition: all 2s ease-in; 
    -moz-transition: all 2s ease-in; 
    -webkit-transition: all 2s ease-in; 
    -o-transition: all 2s ease-in; 
} 

.strappami-wrap { 
    display: block; 
    position: absolute; 
    width: 100px; 
    height: 250px; 
    background: transparent; 
    bottom: -200px; 
    left: 0px; 
} 

.strappami-wrap.w1 { 
    left: 110px 
} 

.strappami-wrap.w2 { 
    left: 220px 
} 

.strappami-wrap.w3 { 
    left: 330px 
} 

.strappami-wrap.w4 { 
    left: 440px 
} 
.strappami-wrap .cover { 
    content: ''; 
    display: block; 
    position: absolute; 
    width: 100px; 
    height: 50px; 
    background: green; 
    top: 30px; 
    left: 0px; 
} 


.strapping { 
    bottom: -900px; 
    opacity: 1; 
    z-index: -200; 
    -webkit-transform: rotate(-5deg); 
    -moz-transform: rotate(-5deg); 
} 

.strapping-alt { 
    bottom: -800px; 
    opacity: 1; 
    z-index: -200; 
    -webkit-transform: rotate(3deg); 

    -moz-transform: rotate(3deg); 
} 

SIMPLER JS

$(document).ready(function() { 

    $(".strappami-wrap").on('click', function() { 
     var r = Math.floor(Math.random()*10); 
     if (r < 5){      
      $(this).find(".strappami").addClass('strapping'); 
     } else { 
      $(this).find(".strappami").addClass('strapping-alt'); 
     } 
     $(this).find(".cover").fadeOut(); 
    }); 
});