JSFiddle - React, Tailwind, and code Playground

by Takayuki Shimada

HTML

<button>Move</button>
<div id="world">
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <div id="box3" class="box"></div>
    <div id="box4" class="box"></div>
</div>

SCSS

#world {
  position: relative;
  height: 150px;
  border: 1px solid #ccc;
}
.box {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #00f;
  top: 100px;
}
#box1 { left: 0; }
#box2 { left: 55px; }
#box3 { left: 110px; }
#box4 { left: 165px; }

JavaScript

function move() {
	var boxes = $('.box');
	var box1 = $('#box1');
	var box2 = $('#box2');
	var box3 = $('#box3');
	var box4 = $('#box4');

	box1.animate({ 'top':'0' }, 1000);
	box2.delay(500).fadeOut(1000);
	box3.delay(1000).slideUp(500).slideDown(500).slideUp(1000);
	box4.delay(1500).hide(1000);

	$.when(boxes).done(function () {
		alert('done!');
	});
}

$('button').on('click', move);