JSFiddle - React, Tailwind, and code Playground

by Cynx EchoSteg

HTML

<button id="fadeInOut">
 Fade In then Out
</button>
<div id="div1" class="box1"></div>
<div id="div2" class="box2"></div>
<br/>
<div class="clearfix">

</div>
<br/>
<button id="fadeOutIn">
Fade Out then In
</button>
<div id="div3" class="box1"></div>
<div id="div4" class="box2"></div>

CSS

.box1 {
  width:50px;
  height:50px;
  background-color:blue;
  position:relative;
  float:left;
}

.box2 {
  width:50px;
  height:50px;
  background-color:coral;
  position:relative;
  float:left;
}

.clearfix {
  clear:both;
}

#fadeInOut {
  position:relative;
  float:left;
}

#fadeOutIn {
  position:relative;
  float:left;
}

#div1 {
  display:none;
}

#div4 {
  display:none;
}

JavaScript

var fade = function (type, ms, el, callback, cel) {
               
                var isIn = type === 'in',
                oppStatus = isIn ? 'out' : 'in',
                opacity = isIn ? 0 : 1,
                interval = 50,
                gap = interval / ms;
 
                if (isIn) {
                    el.style.display = 'block';
                    el.style.opacity = opacity;
                }
 
                function func() {
                    opacity = isIn ? opacity + gap : opacity - gap;
                    el.style.opacity = opacity;
 
                    if (opacity <= 0) el.style.display = 'none'
                    if (opacity <= 0 || opacity >= 1) {
                        window.clearInterval(fading);
                        if (typeof callback !== 'undefined' && typeof cel !== 'undefined') {
                            callback(oppStatus, ms, cel);
                        }
                    }
                }
                var fading = window.setInterval(func, interval);
            }
            
var btnInOut = document.getElementById('fadeInOut');
var btnOutIn = document.getElementById('fadeOutIn');

var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');

var div3 = document.getElementById('div3');
var div4 = document.getElementById('div4');

btnInOut.addEventListener('click',function(){
		fade('in',1000,div1,fade,div2)
});

btnOutIn.addEventListener('click',function(){
		fade('out',1000,div3,fade,div4)
});