JSFiddle - React, Tailwind, and code Playground

by Josh Weir

HTML

<div>this is before</div>
<div id="wrapper">
    <div id="box1" class="box">josh</div>
    <div id="box2" class="box">weir</div>
</div>
<div>this is after</div>

CSS

.box {
    position: absolute;
    height: 100px;
    width: 100px;
}

#wrapper {position: relative;}

#box1 {background-color: #F00;}
#box2 {background-color: #00F; display: none; }

JavaScript

var fadeinBox = $("#box2");
var fadeoutBox = $("#box1");

function fade() {
    fadeinBox.stop(true, true).fadeIn(2000);
    fadeoutBox.stop(true, true).fadeOut(2000, function() {
        var temp = fadeinBox;
        fadeinBox = fadeoutBox;
        fadeoutBox = temp;
        setTimeout(fade, 1000);
    });
}

fade();