JSFiddle - React, Tailwind, and code Playground
HTML
<a>Start Animation</a>
<div class="discrete"></div>
<div class="discrete"></div>
<div class="discrete"></div>
<div class="discrete"></div>
<div class="discrete"></div>
CSS
.discrete {
position:relative;
opacity:1;
width:100px;
height:100px;
border:1px solid black;
background:#CCC;
margin: 10px;
-webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
-o-transition: all .5s linear;
transition: all .5s linear;
}
.discrete.out {
left:-40px;
opacity:0;
}
JavaScript
function createWorkQueueFunction($element) {
return function(next) {
$element.addClass("out");
next();
};
}
$('a').click(function() {
var queue = $({}); //use the default animation queue
$(".discrete").each(function() {
queue.queue(createWorkQueueFunction($(this)));
queue.delay(100);
});
});