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 and show next
  $(this).prevAll().velocity( 'transition.slideDownOut', { stagger: 250 });
  $(this).parent().next().children().velocity({ delay: 750 }).velocity( 'transition.slideDownIn', { stagger: 250,
      backwards: true });
});

$('.back').click(function() {
  $(this).parent().fadeOut( 500 ).prev().fadeIn( 500 ); //hide parent and show previous
  $(this).parent().children().velocity( 'transition.slideUpOut', { stagger: 125 });
  $(this).parent().prev().children().velocity({ delay: 375 }).velocity( 'transition.slideUpIn', { stagger: 125 });
});