JSFiddle - React, Tailwind, and code Playground

by crowjonah

HTML

<div id="thing">1</div>
<div id="second">4</div>
<button id="run">Run</button><button id="stop">Interrupt</button><button id="glitch">Glitch</button>

CSS

#thing, #second {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: rgb(150,23,34);
    position: absolute;
    top: 35px;
    left: 5px;
    color: white;
    text-align: center;
    line-height: 20px;
}
#second {
    display: none;
    background: black;
    border-radius: 0;
    top: 80px;
    left: 50px;
}

JavaScript

var thing = $('#thing'),
    second = $('#second');
var carryOn = function(){
    // $.fx.off = false;
    second.attr('style','').css({'display':'block','opacity':'0'});
    
    thing
        .attr('style','')
        .css('margin-top','0')
        .html('1')
        .animate({'margin-top':'100px'}, 400, 'linear', function(){
            thing
                .html('2')
                .animate({'margin-left':'100px'}, 400, 'linear', function(){    
                    thing
                        .html('3')
                        .animate({'margin-top':'0'}, 400, 'linear', function(){
                            thing
                                .html('4')
                                .animate({'margin-left':'0'}, 400, 'linear', function(){
                                    stepTwo();
                                });
                        });
                });
        });
};

var stepTwo = function(){
    second.animate({'opacity':'1'}, 400, 'linear', function(){
    });
};


$('#stop').on('click', function(){
    thing.attr('style', '');
    // $.fx.off = true;
});
$('#run').on('click', carryOn);
$('#glitch').on('click', function(){
    carryOn();
    setTimeout(function(){
        thing.attr('style','');
        carryOn();
    }, 600);
});