JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div class="faded">Div 1</div>
<div class="faded">Div 2</div>
<div class="faded">Div 3</div>
<div class="faded">Div 4</div>
<div class="faded">Div 5</div>
<div class="faded">Div 6</div>
<div class="faded">Div 7</div>

CSS

.faded { display: none; border: solid 1px #ddd; background: #eee; position: relative;}

JavaScript

//fade in sequentially, slide right after fade
$("div").each(function(fade) {
    $(this).delay(fade * 200).fadeIn().css("display:block;");
});
$(".faded").each(function(s) {
  $(this).delay(s * 0).animate({ "left": "+=50px" }, "slow" );
});