JSFiddle - React, Tailwind, and code Playground

HTML

<strong>Click me to test!</strong>

<span class="old">Old</span>
<span class="new">New</span>

<em>If you keep clicking quickly and suddenly stop, you'll notice the "old" box keeps animating further than it should do. The new method stops that with one line! Back to Forrst</em>

CSS

* {
    margin: 0;
    padding: 0;
    font: 15px "Helvetica Neue", sans-serif;   
}
body {
    padding: 60px;   
}

strong {
    display: block;
    float: left;
    cursor: pointer;
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
    
    background: #eee;
    padding: 10px 15px;
}
span {
    display: block;
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    clear: both;
    
    text-align: center;
    color: #fff;
    line-height: 40px;

    position: relative;    
}

.old { background: #aaa; }
.new { background: #f63; }

em {
    font: italic 14px/22px Georgia, serif;
    color: #777;

    display: block;
    max-width: 500px;
    margin-top: 80px;    
}

JavaScript

//  Old example
$('strong').click(function() {
    $('.old').animate({left: '+=10'});
    $('.new').is(':animated') || $('.new').animate({left: '+=10'});
});