JSFiddle - React, Tailwind, and code Playground
HTML
<div class="blueDiv toBeFaddedIn"></div>
<div class="blueDiv toBeFaddedIn"></div>
<div class="blueDiv toBeFaddedIn"></div>
<div class="blueDiv toBeFaddedIn"></div>
<div class="blueDiv toBeFaddedIn"></div>
CSS
.blueDiv {
background-color: blue;
height:50px;
width: 50px;
display: none;
}
JavaScript
function sequentialFadeIn(selectorText, speed, display, callBack) {
display = typeof display !== 'undefined' ? display : "block";
function helper() {
nextElementToFadeIn = $(selectorText).not(".alreadyFadedIn").first();
nextElementToFadeIn.fadeIn(speed, function() {
$(this).addClass("alreadyFadedIn");
helper();
}).css("display", display);
}
helper();
callBack(selectorText);
}
sequentialFadeIn(".toBeFaddedIn", "fast", "inline-block", function cleanUp(selectorText1) {
$(selectorText1).removeClass("alreadyFadedIn");
console.log("Clean up has been performed.");
console.log("Selector text:" + selectorText1);
});