JSFiddle - React, Tailwind, and code Playground

by wittnl

HTML

<div id="square"></div>

CSS

#square {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

JavaScript

$(document).ready(function() {
    $("#square").click(function() {
        animate();
    });
                  
    function animate() {
        var props = { left: "100%" };
        var opts = {
            duration: 1000,
            // This happens after the animation finishes
            done: function() {
                $(this).css("left", "0%");
                $("body").append("<p>Animation complete</p>");
            }
        };
        
        $("#square")
            .css("left", "0%")
            .animate(props, opts);
    }
});