JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<div id="test"></div>

CSS

#test {
    width: 15em;
    height: 15em;
    background: #000;
    border-radius: 50%;
    margin: 2em auto;
    display: none;
}

JavaScript

if (typeof HTMLElement.prototype.fadeIn !== 'function') {

    HTMLElement.prototype.fadeIn = function(speed, callback) {

        var element = this;
        element.style.opacity = 0;
        element.style.display = 'block';
        var i = 0.00;
        var counter = 0;
        var interval = Math.round(speed / 100);

        var timer = setInterval(function() {

            i += 0.01;
            counter++;
        

            if (counter == 100) {
                
                clearInterval(timer);

                callback();

            }

            element.style.opacity = i;


        }, interval);



    };

}


var test = document.getElementById('test');
test.fadeIn(1000, function() {

    alert('Complete!');
});