[APORTE] Métodos 'fadeIn' y 'fadeOut' de jQuery en código JS nativo

[Alexis88]

Hola amigos del foro, en esta ocasión, vengo a compartir con ustedes esta implementación que realicé de los métodos fadeIn y fadeOut de jQuery en código nativo de JavaScript.

Código HTML:

<img src = "imagen.jpg" />
<button>Fade In</button>
<button>Fade Out</button>
 

Código Javascript:

var btnIn = document.getElementsByTagName("button")[0], //Botón 'Fade In'
    btnOut = document.getElementsByTagName("button")[1], //Botón 'Fade Out'
    img = document.getElementsByTagName("img")[0], //La imagen
    fadeOut = function (objeto, tiempo){
        var valor = 1, //Valor inicial
            intervalo = setInterval(function(){ //Inicio del intervalo
                valor -= 0.01; //En cada llamada a la función, se resta 0.01 a 'valor'
                objeto.style.opacity = valor; //Se asigna el valor de 'valor' a la propiedad 'opacity' del objeto
                if (valor < 0) clearInterval(intervalo); //Si el valor es menor a cero, se termina el intervalo
        }, 10 / tiempo);
    },
    fadeIn = function (objeto, tiempo){
        var valor = 0, //Valor inicial
            intervalo = setInterval(function(){ //Inicio del intervalo
                valor += 0.01; //En cada llamada a la función, se suma 0.01 a 'valor'
                objeto.style.opacity = valor; //Se asigna el valor de 'valor' a la propiedad 'opacity' del objeto
                if (valor > 1) clearInterval(intervalo); //Si el valor es menor a cero, se termina el intervalo
            }, 10 / tiempo);
    };
 
btnIn.addEventListener("click", function(){
    //Si no se ha establecido el valor de opacidad de la imagen
    //O si el valor entero de la opacidad de la imagen es igual a cero
    //Se le aplica la función 'fadeIn'
    if (!img.style.opacity || Math.round(img.style.opacity) == 0) fadeIn(img, 1000);
}, false);
 
btnOut.addEventListener("click", function(){
    //Si no se ha establecido el valor de opacidad de la imagen
    //O si el valor entero de la opacidad de la imagen es igual a 1
    //Se le aplica la función 'fadeIn'
    if (!img.style.opacity || Math.round(img.style.opacity) == 1) fadeOut(img, 1000);
}, false);
 

DEMO

Saludos