JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

CSS

.box{
    height:50px;
    width:50px;
    background-color:#000;
    margin-bottom:5px;
    display:none;
}

JavaScript

var v = $(".box");
var cur = 0;

var first = function () { 
	function fadeInNextLI() {
		v.eq(cur++).fadeIn(200);
			  if(cur != v.length) setTimeout(fadeInNextLI,100);
              /*
              this doesn't work
              if(cur === v.length) return $.Deferred().resolve();
              */
	}
	fadeInNextLI();
    return $.Deferred().resolve();
};

var second = function () {
    alert('done');
};

first().done(second);