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(); 
    }); 
});