JSFiddle - React, Tailwind, and code Playground

by Mani Tamilarasan

HTML

<div id="block1">block1</div>
<div id="block2">block2</div>
<div id="block3">block3</div>

JavaScript

var shortIntervalTime = 1000;
var longIntervalTime = 1000;

var arr = ['block1','block2','block3'];

function cycle(id) {
    //console.log(id);
    var nextId = (id < arr.length)?id:0;
    initDisplayTimer(); // this line here only for demo purposes
    $("#" + arr[nextId])
        .delay(shortIntervalTime)
        .fadeIn(500)
        .delay(longIntervalTime)
        .fadeOut(500, function () {
        cycle(++nextId)
    });
    }
    // ---------------------------------------------
    // this code after here only for demo purposes
    var timer;
    var cntr;
    var iterations = 0;

    function initDisplayTimer() {
        cntr = 0;
        ++iterations;
        $("#iterations").html("Iterations: " + iterations);
        if (timer) {
            clearInterval(timer);
        }
        timer = setInterval(function () {
            ++cntr;
            $("#timer").html("Seconds: " + (cntr / 10).toFixed(1));
        }, 100);
    }

    // end of demo code
    // ---------------------------------------------
    cycle(0);