JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<div id="one">One</div>
<div id="two">Two</div>
<p>Click one div, then while it's fading, click the other. The second div's animation will stop as soon as the first one's animation completes.</p>

CSS

div {
    margin: 10px;
    float: left;
    width: 100px;
    height: 100px;
    background: red;
}
p {
    margin: 10px;
    clear: both;
}

JavaScript

$('#one, #two').click(function() {
    $(this).fadeTo(2000, 0, function() {
        $(this).stop();
    });
});