JSFiddle - React, Tailwind, and code Playground

by dmethvin

HTML

<button data-clearqueue="true" data-jumptoend="false">stop(true,false)</button><br />
<button data-clearqueue="true" data-jumptoend="true">stop(true,true)</button>
<div id="b"></div>

CSS

#b {
    height: 100px;
    width: 100px;
    margin-top: 20px;
    background-color: #00f;
}

JavaScript

var launchAnim = function(clearQueue, jumpToEnd) {
    $('#b').stop(clearQueue, jumpToEnd).fadeOut(500);
    
    window.setTimeout(function() {
        $('#b').stop(clearQueue, jumpToEnd).fadeIn(500);
    }, 300);
};

$('button').click(function() {
    launchAnim($(this).data('clearqueue'), $(this).data('jumptoend'));
});