JSFiddle - React, Tailwind, and code Playground

by acturbo

HTML

<span id="clickme">click me</span>
<div class="bar" id="a">a</div>
<div class="bar" id="b">b</div>
<div class="bar" id="c">c</div>
<div class="bar" id="d">d</div>

CSS

.bar {
 width:100px;
 height:20px;   
    color: #777777;
    font-size: 12px;
}

JavaScript

// mini animation engine, but not really


// init the document
$(".bar").each(function () {
    var hue = 'rgb(200,215,'+getRandomInt(0,255)+')';
    $(this).css("background-color", hue);
});

engine = new Engine(); 
    
$("#clickme").on('click', function() {
    $(".bar").each(function() {
        engine.add();
        //pass anon function that calls oncomplete on the engine instance
        //you were a reference to the method, and lost the context
        $(this).animate({width:200}, getRandomInt(500, 3000), 
        function()
        {
            engine.oncomplete();
        });
    });
});

// utils
function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

// animation engine
function Engine()
{   
    this.i = 0;
}
Engine.prototype.add = function()
{
        this.i++;
};
Engine.prototype.oncomplete = function()
{
        this.i--;
        if (this.i <= 0)
        {
            return this.finish();
        }
};
Engine.prototype.finish = function()
{
    //alert('done');
};