JSFiddle - React, Tailwind, and code Playground

by trolleymusic

HTML

<div id="main">
    <input id="move-me">
    
    <div id="buttons">
        <button id="start">Start</button>
        <button id="stop">Stop</button>
    </div>
</div>

CSS

#main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(25,27,29);
}
#move-me {
    position: absolute;
    left: 10%;
    top: 10px;
    width: 80%;
    height: 30px;
}

#buttons {
    position: absolute;
    bottom: 30px;
    width: 100%;
    height: 30px;
    text-align: center;
}

button {
    margin: 10px;
    padding: 5px;
}

JavaScript

var animate = function(e,c,t) { e.animate(c, t); }

var timer = null;
    
var moveDown = function () {
    animate($('#move-me'), { 'top' : '400px' }, 2000);
    timer = setTimeout(function () { moveUp() }, 3000);
}

var moveUp = function () {
    animate($('#move-me'), { 'top' : '10px' }, 2000);
    timer = setTimeout(function () { moveDown() }, 3000);
}
                       
var stop = function () {
    clearTimeout(timer);
    timer = null;
}
    
$('#start').click(function() { moveDown(); })
$('#stop').click(function() { stop(); })