JSFiddle - React, Tailwind, and code Playground

by justme_march

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<input id="btn1" type="button" value="start" />

CSS

ul{margin:0; padding:0; text-align:left; width:400px; list-style:none; border:1px solid black;}
    ul li{ width:200px; height:50px; background:#0CF;margin:2px 0;}

JavaScript

var btn = document.getElementById("btn1");
        var aLi = document.getElementsByTagName("li");
        var timer = null;
        var iNum = 0;
        btn.onclick = function(){
            setTimeout(function(){
                timer = setInterval(function(){
                    if(iNum == aLi.length){
                        clearInterval(timer);
                        return false;
                    }
                    startMove(aLi[iNum]);
                    iNum++;
                },440);
            },100);
        }
        
        function startMove(obj){
            var _timer = null;
            var intance = 0;
            _timer = setInterval(function(){
                
                if(intance == 200)
                {
                    clearInterval(_timer);    
                }
                obj.style.marginLeft = intance+"px";
                intance += 10;
                },20);
        }