JSFiddle - React, Tailwind, and code Playground

by creativecouple

HTML

<script src="http://creativecouple.github.com/jquery-timing/jquery-timing.min.js"></script>
<div id="boxparent"></div>
<button>animate</button>

CSS

body {
    background: black;
}
#boxparent {
    position: absolute;
    width: 150px;
    height: 150px;
    top: 50px;
    left: 50px;
    overflow: visible;
    background: #222;
    border: 1px solid #666;
}
#boxparent div {
    width: 20px;
    height: 20px;
    position: relative;
    float: right;
    margin: 5px;
    padding: 0;
    background: white;
}

JavaScript

// create 16 little squares and hide them
$('#boxparent').repeat().append('<div>').until(25).children().hide();

// define the reverse function that jQuery is still missing
$.fn.reverse = function() {
  return this.$(this.get().reverse());
}

// start boxes animation on button click
$('button').on('click').fadeTo('slow',0)
  .$('#boxparent div').stop(true,true).unwait().css({top:-300}).show()
  .reverse().each($).animate({top:0},500).wait(100).all()
  .wait(500).fadeOut('slow')
  .$('button').wait(200).fadeTo('slow',1);