JSFiddle - React, Tailwind, and code Playground

by andrewwhitaker

HTML

<div id="msg_feed_frame_1" class="hidden">
    Hello
</div>
<div id="msg_feed_frame_2" class="hidden">
    World
</div>
<div id="msg_feed_frame_3" class="hidden">
    Foo
</div>
<div id="msg_feed_frame_4" class="hidden">
    Bar
</div>

CSS

.hidden { display:none; }

JavaScript

function feed(i) {
    var div = "#msg_feed_frame_";
    var fader = div.concat(i);
    $(fader).fadeIn(2000);

}

function timefade() {
    var num = 1;
    var fadeIt = function(i) {
        return function() { feed(i); };
    };
    for (num = 1; num <= 4; num++) {
        var t = setTimeout(fadeIt(num), num * 1000);
    }
}

$(document).ready(function() {
    timefade();
});