JSFiddle - React, Tailwind, and code Playground

by adjit

HTML

<div class="container">
    <div data-line="1">One</div>
    <div data-line="2">Two</div>
    <div data-line="3">Three</div>
    <div data-line="4">Four</div>
    <div data-line="5">Five</div>
    <div data-line="6">Six</div>
    <div data-line="7">Seven</div>
    <div data-line="8">Eight</div>
    <div data-line="9">Nine</div>
    <div data-line="10">Ten</div>
</div>

CSS

.container div {
    width: 100%;
    line-height: 30px;
    background: grey;
    border: 1px solid red;
    text-align: center;
    visibility: hidden;
}

JavaScript

$(document).ready(function(){
    var usedNum = [];
    var i, j, y;
    
    i = 0;
    
    for(y = 0; y < 10; y++){
        var x = Math.floor((Math.random() * 10) + 1);
        
        if(!isUsed(x)) usedNum.push(x);
        else y--;
    }
    
    var showInterval = setInterval ( function(){
        if(i == 10){
            clearInterval(showInterval);
        }
        
        $(".container div[data-line='" + usedNum[i] + "']").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0}, 1000);
        
        i++;
        
    }, 500);
    
    function isUsed(num) {
        var used = false;
        for(j = 0; j < usedNum.length; j++){
            if(usedNum[j] == num){
                used = true;
            }
        }
        return used;
    }
});