JSFiddle - React, Tailwind, and code Playground

by Chan Wu

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<div class="clear"></div>
<button type="button" id="start">start</button>

CSS

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
li {
    width: 100px;
    height: 100px;
    border: 2px solid red;
    float: left;
    margin: 2px;
}
.on {
    border: 2px solid pink;
}
.clear {
    clear: both;
}

JavaScript

var liSize = $('li').size();
    var duration = 70;
    var duration2 = 1000;
    var rounds = 43;

    $('#start').on('click', function() {
        var index = 0;
        var j = 0;

        for (var i = 0; i < rounds; i++) {
            if (i % liSize === 0) {
                index = 0;
            }

            if (i >= rounds - 5) {
                delay = (i * duration) + (j * duration2);
                j++;
            } else {
                delay = i * duration;
            }

            $('li').eq(index).delay(delay).queue(function() {
                var position = $('li').index(this);

                $(this).addClass('on');
                $('li').eq(position - 1).removeClass('on');
                $(this).dequeue();
            });

            index++;
        }

        return false;
    });