Pachira 3

by Brendan Dolan

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/0.7.0/jquery.velocity.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/0.7.0/velocity.ui.min.js"></script>
<div class="wrapper">
    <div class="div div-1">
        <h1>Slide 1</h1>
        <div class="next"></div>
    </div>
    <div class="div div-2">
        <h1 class="elmt">Slide 2</h1>
        <button class="elmt button back">Back</button>
        <div class="next"></div>
    </div>
    <div class="div div-3" style="display:none;">
        <h1 class="elmt">Slide 3</h1>
        <button class="elmt button back">Back</button>
        <div class="next"></div>
    </div>
    <div class="div div-4" style="display:none;">
        <h1 class="elmt">Slide 4</h1>
        <button class="elmt button back">Back</button>
    </div>
</div>

CSS

.wrapper {
    position: relative;
    width: 200px;
    height: 300px;
}

.div {
    position: absolute;
    width: 100%;
    height: 100%;
}

.div-1 {
    background-color: blue;
    z-index: 4;
}

.div-2 {
    background-color: red;
    z-index: 3;
}

.div-3 {
    background-color: yellow;
    z-index: 2;
}

.div-4 {
    background-color: green;
    z-index: 1;
}

.next {
    width: 100%;
    height: 100%;
    z-index: 2222;
}

.elmt {
    opacity: 0;
}

.button {
    z-index: 9999;
}

JavaScript

$('.next').click(function() {
    $(this).parent().fadeOut(1000).nextAll().slice(0, 2).fadeIn(1000); //hide parent (section) and show the next one
    $(this).prevAll().velocity('transition.slideDownOut', {
        stagger: 250
    }); //stagger transition out all of .next's previous siblings
    $(this).parent().next().children().velocity({
        delay: 750
    }).velocity('transition.slideDownIn', {
        stagger: 250,
        backwards: true
    }); //stagger transition in all of the next section's children after a delay
});

$('.back').click(function() {
    $(this).parent().fadeOut(500).prev().fadeIn(500); //hide parent (section) and show the previous one
    $(this).parent().children().velocity('transition.slideUpOut', {
        stagger: 125
    });  //stagger transition out all of this section's children
    $(this).parent().prev().children().velocity({
        delay: 375
    }).velocity('transition.slideUpIn', {
        stagger: 125
    }); //stagger transition in all of the previous section's children after a delay
});