JSFiddle - React, Tailwind, and code Playground

by Elena Shevchuk

HTML

<p>Queue is <span></span>
</p>
<button class="click" id="stop">stop</button>
<div class="cubik"></div>

CSS

div {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 30px;
    background: green;
    display: none;
}
div.newcolor {
    background: blue;
}

JavaScript

$(document).ready(function () {
    $(document.body).click(function () {
        $("div")
            .show("slow")
            .animate({
            left: "+=200"
        }, 2000)
            .queue(function () {
            $(this).addClass("newcolor").dequeue();
        })
            .animate({
            left: "-=200"
        }, 500)
            .queue(function () {
            $(this).removeClass("newcolor").dequeue();
        })
            .slideUp();
    });
    $("#stop").click(function (e) {
        event.stopPropagination();
        $("div")
            .queue("fx", [])
            .stop();
    });
});