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 len = v.length;
console.log(len);
var first = function () { 
	function fadeInNextLI() {
        if(cur+1 == len){
            v.eq(cur++).fadeIn(200,'swing',finish);
        } else {
		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();
};

function finish() {
    alert('done');
};

first();