[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

[herran1212]

buen aporte, muchas gracias

[patilanz]

Esta bien hecho pero creo que es exactamente lo mismo que jquery porque falta la cola ya que si pulso varias veces un boton y el otro no se producen out y in seguidas.

Y una pregunta, porque el el intervalo haces 10/tiempo ? Porque 10 ?

Saludos

[Alexis88]

Hola patilanz, decidí no dejar una cola que sí existe en jQuery y que se puede terminar con los métodos stop, finish y clearQueue pues he tenido clientes que me han reportado que cuando pulsaban un botón varias veces por error (un ataque de nervios, por ejemplo) o 'por jugar', se producía el efecto tantas veces que retrasaba las acciones que en realidad querían hacer en la aplicación. Por otro lado, el intervalo es de una décima del tiempo establecido para que sea equivalente al valor que sumo y resto al atributo opacity del objeto en cada iteración del intervalo. Solo por eso.

Saludos