JSFiddle - React, Tailwind, and code Playground

by John Grivas

HTML

<div id="thumbnail1"></div>
<div id="thumbnail2"></div>
<div id="thumbnail3"></div>
<div id="thumbnail4"></div>
<a href="#" id="link">click me to fade in</a>

CSS

#thumbnail1 {
    height:30px;
    width:30px;
    background:green;
    display:none;
}
#thumbnail2 {
    height:30px;
    width:30px;
    background:red;
    display:none;
}
#thumbnail3 {
    height:30px;
    width:30px;
    background:black;
    display:none;
}
#thumbnail4 {
    height:30px;
    width:30px;
    background:grey;
    display:none;
}

JavaScript

var i = "1";
var testimonialElements = $('div');


$('#link').click(function() {
$('#thumbnail' + i).fadeIn('fast', function () {
     setTimeout(function(){
    console.log('#thumbnail' + i);
    for (i = 2; i <= testimonialElements.length; i++) {
        var element = testimonialElements.eq(i);
        $('#thumbnail' + i).fadeIn(1000);
    }
           }, 2000);
});
    })