JSFiddle - React, Tailwind, and code Playground

by Jaecheol Kim

HTML

<p><button id="go">Run »</button></p>
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
    <div class="block">5</div>
    <div class="block">6</div>
    <div class="block">7</div>

CSS

div {
    position: relative;
    background-color: #abc;
    width: 40px;
    height: 40px;
    float: left;
    margin: 5px;
}

JavaScript

$( "#go" ).click(function() {
    $( ".block:nth(3)" ).css("visibility","hidden");
    $( ".block:nth(3)" ).animate({
        left: -50
    }, {
        duration: 1000,
        step: function( now, fx ){
            $( ".block:gt(3)" ).css( "left", now );
        }
    }); 
});