JSFiddle - React, Tailwind, and code Playground

by MegaScience

HTML

<div id="id10574"><span>♥</span></div>

CSS

div#id10574 {
  display: table;
  margin: 0 auto;
}

div#id10574 span {
  font-size: 6em;
}

JavaScript

const fadeObj = {
	heart: document.getElementById('id10574'),
  opacity: 1,
  debug: false,
  fade: function (e) {
  	if(this.debug) console.log('Changed state for: ' + e.type)
  	clearInterval(this.fadeInterval)
    /*switch(e.type) {
    	case 'mouseenter':
      	if(this.opacity > 0) this.fadeInterval = setInterval(() => this.doFade(-0.01), 10)
      	break
      case 'mouseleave':
      	if(this.opacity < 1) this.fadeInterval = setInterval(() => this.doFade(+0.01), 10)
      	break
    	default: alert(e.type)
    }*/
		this.fadeInterval = setInterval(() => this.doFade(e.type === 'mouseenter' ? -0.01 : (e.type === 'mouseleave' ? +0.01 : 1)), 10)
  },
  doFade: function (v) {
  	this.opacity = Math.max(Math.min(this.opacity + v, 1), 0)
  	if(this.opacity === 1 || this.opacity === 0) {
      if(this.debug) console.log('Hit wall at: ' + this.opacity)
    	clearInterval(this.fadeInterval)
    }
  	this.heart.style.opacity = this.opacity
  },
	init: function () {
  	const func = this.fade.bind(this)
		this.heart.addEventListener('mouseenter', func, false)
		this.heart.addEventListener('mouseleave', func, false)
  }
}
fadeObj.init()
/*var heart = document.getElementById("id10574"),
	fadeInTimeout,
  fadeOutTimeout;

heart.style.opacity = 1;

function fadeout() {
		clearTimeout(fadeInTimeout);
    var curOpacity = parseFloat(heart.style.opacity);
    if (curOpacity > 0) {
        heart.style.opacity = (curOpacity - 0.01);
        fadeOutTimeout = setTimeout(fadeout, 10);
    }
}


function fadein() {
		clearTimeout(fadeOutTimeout);
    var curOpacity = parseFloat(heart.style.opacity);
    if (curOpacity < 1) {
        heart.style.opacity = (curOpacity + 0.01);
        fadeInTimeout = setTimeout(fadein, 10);
    }
}

heart.addEventListener("mouseenter", fadeout, false);
heart.addEventListener("mouseleave", fadein, false);*/