JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<div class="square"></div>

<button>animate</button>

CSS

.square {
    position:absolute;
    top:0px;
    left:0px;
    width:50px;
    height:50px;
    background-color:#ff0000;
}

button {
    position:relative;
    top:60px;
}

JavaScript

$("button").click(animate);
var $square = $('.square');

function animate() {
    $square.stop();
    $square.animate(
        { left : "+=50px" },
        { duration: 1000, easing: "linear", complete:animate }
    );
}