JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<div id="info">
    <div id="iterations"></div>
    <div id="timer"></div>
</div>
<div id="block1"></div>
<div id="block2"></div>

CSS

#block1, #block2 {
    height: 100px;
    width: 100px;
    margin: 5px;
    display: none;
}

#block1 {background-color: #F00;}
#block2 {background-color: #00F;}

#info {margin: 5px 0 30px 5px;}

JavaScript

var shortIntervalTime = 1500;
var longIntervalTime = 7500;

function cycle(id) {
    var nextId = (id == "block1") ? "block2": "block1";
    initDisplayTimer();   // this line here only for demo purposes
    $("#" + id)
        .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("block1");