CODEWITHSUNDEEP
javascriptjqueryhtmlcss
skz
skz

Reputation: 165

fadeOut() applying only to first :before pseudo-element

I'm in a tricky situation -- I'm trying to build a sort of realistic flyer, with clickable paper strips at the bottom. Just for a visual reference, something like this: http://static.someecards.com/someecards/images/feed_assets/4d657f7fa4817.jpg

I built the body of the flyer with an empty div, and I absolutely positioned the "paper strips" at the bottom of this div. Then, since I'll want to add a "torn paper" border-image at the bottom of the flyer body, I gave the strips a negative z-index.

Then, in order to cover the torn-paper-border, I positioned an empty, transparent div on the top of them, with a solid-coloured pseudo element that will disappear once the CSS3 animation will be triggered (via 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 for reference: http://jsfiddle.net/XR7LT/

As you can see, I'm applying a fadeOut() effect to the pseudo element in order to disappear gently. The problem is, the fadeOut() only applies to the first pseudo element, while hiding the others without any effect.

Problem shows on both Chromium and FF browser, Ubuntu Linux 12.10.

Any ideas?

Thanks in advance.

Upvotes: 1

Views: 423

Answers (2)

Chris Jaynes
Chris Jaynes

Reputation: 2907

I got here after Roise, but you should be able to simplify your solution significantly by leveraging parent child relationships and adding multiple classes.

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

When you have 5 elements that should all have the same behavior, use the same class for all of them, and apply the code to all of them. Then you can add some additional classes to move the additional pieces over a bit.

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

Upvotes: 0

Roise
Roise

Reputation: 364

Your CSS is not the same for all elements. The transitions should not be in both .strappamiX and .strappamiX-wrap,

I removed them from wrap:

.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;
}

Created a fork of your fiddle here: http://jsfiddle.net/sn6ZT/1/

Upvotes: 2

Related Questions