JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<div class="box"></div>
<button class="animate">Animate</button>
<button class="transition">Transition</button>
<button class="stop">Stop!</button>
<button class="reset">Reset</button>

CSS

.box {
    position:absolute;
    top:40px;
    width: 100px;
    height:100px;
    background-color:grey;
}

JavaScript

$(".animate").click(function() {
    $(".box").animate({
        left: "+=500"
    }, 5000);
});

$(".transition").click(function() {
    $(".box").transition({
        left: "+=500"
    }, 5000);
});

$(".stop").click(function() {
    $(".box").stop(true, false);
});

$(".reset").click(function() {
    $(".box").stop(true).css("left", "0px");
});