JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<div id="parent_container">
    
    <div class="block-item">1</div>
    <div class="block-item">2</div>
    <div class="block-item">3</div>
    <div class="block-item">4</div>
    <div class="block-item">5</div>
    <div class="block-item">6</div>
    <div class="block-item">7</div>
    <div class="block-item">8</div>
    <div class="block-item">9</div>
    <div class="block-item">10</div>
    <div class="block-item">11</div>
    <div class="block-item">12</div>
    <div class="block-item">13</div>
    <div class="block-item">14</div>
    <div class="block-item">15</div>
    <div class="block-item">16</div>
    <div class="block-item">17</div>
    <div class="block-item">18</div>
    
</div>

CSS

.block-item {
    width:50px;
    height:50px;
    margin:0px 10px 10px 0px;
    display:block;
    float:left;
    background:#fff;
    overflow:hidden;
    cursor:pointer;
    border:1px solid #000;
}

JavaScript

function fade(index) {
    var fff = $('.block-item:last').index();
    $('.block-item').eq(index).animate({
        opacity: 0
    }, function() {
        if (index < fff-3) {
            fade(index + 1);
        }
    })
}

fade(0);