JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Flesh and Bone</h1>
<button id="fade">Fade</button>
<button id="show">Bring Back</button>
<h2>The Killers</h2>
JavaScript
var el = document.querySelector("h1");
var fade = document.getElementById("fade");
var show = document.getElementById("show");
var fader = function () {
el.style.opacity = 1;
var timer = setInterval(function (){
console.log('here')
el.style.opacity = (el.style.opacity - 0.1).toFixed(1);
if (el.style.opacity == 0) {
clearInterval(timer);
}
}, 40);
}
var shower = function () {
el.style.opacity = 0;
var timer = setInterval(function (){
el.style.opacity = (parseFloat(el.style.opacity) + 0.1).toFixed(1);
if (el.style.opacity == 1) {
clearInterval(timer);
}
}, 40);
}
fade.onclick = fader;
show.onclick = shower;