Foros del Web » Programando para Internet » Javascript »

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

Estas en el tema de [APORTE] Métodos 'fadeIn' y 'fadeOut' de jQuery en código JS nativo en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/04/2014, 03:35
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 8 meses
Puntos: 977
[APORTE] Métodos 'fadeIn' y 'fadeOut' de jQuery en código JS nativo

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:
Ver original
  1. <img src = "imagen.jpg" />
  2. <button>Fade In</button>
  3. <button>Fade Out</button>

Código Javascript:
Ver original
  1. var btnIn = document.getElementsByTagName("button")[0], //Botón 'Fade In'
  2.     btnOut = document.getElementsByTagName("button")[1], //Botón 'Fade Out'
  3.     img = document.getElementsByTagName("img")[0], //La imagen
  4.     fadeOut = function (objeto, tiempo){
  5.         var valor = 1, //Valor inicial
  6.             intervalo = setInterval(function(){ //Inicio del intervalo
  7.                 valor -= 0.01; //En cada llamada a la función, se resta 0.01 a 'valor'
  8.                 objeto.style.opacity = valor; //Se asigna el valor de 'valor' a la propiedad 'opacity' del objeto
  9.                 if (valor < 0) clearInterval(intervalo); //Si el valor es menor a cero, se termina el intervalo
  10.         }, 10 / tiempo);
  11.     },
  12.     fadeIn = function (objeto, tiempo){
  13.         var valor = 0, //Valor inicial
  14.             intervalo = setInterval(function(){ //Inicio del intervalo
  15.                 valor += 0.01; //En cada llamada a la función, se suma 0.01 a 'valor'
  16.                 objeto.style.opacity = valor; //Se asigna el valor de 'valor' a la propiedad 'opacity' del objeto
  17.                 if (valor > 1) clearInterval(intervalo); //Si el valor es menor a cero, se termina el intervalo
  18.             }, 10 / tiempo);
  19.     };
  20.  
  21. btnIn.addEventListener("click", function(){
  22.     //Si no se ha establecido el valor de opacidad de la imagen
  23.     //O si el valor entero de la opacidad de la imagen es igual a cero
  24.     //Se le aplica la función 'fadeIn'
  25.     if (!img.style.opacity || Math.round(img.style.opacity) == 0) fadeIn(img, 1000);
  26. }, false);
  27.  
  28. btnOut.addEventListener("click", function(){
  29.     //Si no se ha establecido el valor de opacidad de la imagen
  30.     //O si el valor entero de la opacidad de la imagen es igual a 1
  31.     //Se le aplica la función 'fadeIn'
  32.     if (!img.style.opacity || Math.round(img.style.opacity) == 1) fadeOut(img, 1000);
  33. }, false);

DEMO

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #2 (permalink)  
Antiguo 10/04/2014, 14:13
Avatar de herran1212  
Fecha de Ingreso: julio-2013
Ubicación: cali
Mensajes: 89
Antigüedad: 11 años
Puntos: 3
Respuesta: [APORTE] Métodos 'fadeIn' y 'fadeOut' de jQuery en código JS nativo

buen aporte, muchas gracias
  #3 (permalink)  
Antiguo 11/04/2014, 14:52
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 12 años, 6 meses
Puntos: 29
Respuesta: [APORTE] Métodos 'fadeIn' y 'fadeOut' de jQuery en código JS nativo

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
  #4 (permalink)  
Antiguo 11/04/2014, 15:22
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 8 meses
Puntos: 977
Respuesta: [APORTE] Métodos 'fadeIn' y 'fadeOut' de jQuery en código JS nativo

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
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Etiquetas: fadein, fadeout, jquery
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 3 personas




La zona horaria es GMT -6. Ahora son las 02:36.