JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<script src="http://192.168.239.1:8888/jquery/dist/jquery.js"></script>
<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();
}