JSFiddle - React, Tailwind, and code Playground

by rtempchin

HTML

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

<button class="animate">animate</button>

CSS

.square {
    position:absolute;
    top:0px;
    width:50px;
    height:50px;
}
.one {
    left:0px;
    background-color:#ff0000;
}
.two {
    left:50px;
    background-color:#0000ff;
}
button {
    position:relative;
    top:60px;
}

JavaScript

$(".animate").click(animate);

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

function complete() {
    console.log("Show this just once.");
    $(".one").stop(true, false);
}