fadeObj.js –Nuevo script.

Hoy les traigo un script que estuve desarrollando durante mi tiempo libre estos dos últimos días. Aun me falta cosas por hacerle, como por ejemplo hacerlo cross browser, pero por ahora creo que es un buen ejercicio para quien lo quiera checar e incluso usar. Agradezco a mi gran amigo Panino5001 quien me ayudo a aclarar una duda que me surgió mientras codigueaba.

Checa un ejemplo de fadeObj.js

fadeObj.js

//ObjectName: fade
//Author:     Buzu.
//Varsion:    1.0
//todo:       evitar que se cancele el efecto una vez terminado.
//Bugs?:      Please report any bug to @imbuzu on twitter. use #fade1.0 #Bug


fade = {
 el : null,
 intervalo : null,
 mod : null,
 inAlph : null,
 seg : null,
 fadeF : function(e, m, s){
 //fadeF sig. fadeFunction
 //aceleramos el acceso a fade con una variable local.
 var f = fade;
 f.seg = s || 3;
 !e ? alert('No Elem') : (f.el = e);
 f.mod = m || 's';
 f.mod == 's' ? f.fadeout() : f.mod == 'e' ? f.fadein() : alert('no valid mode');
 },
 fadein : function(){
 var f = fade;
 //si se vuleve a activar el fade sobre el mismo objeto
 //no queremos que el objeto vuelva a alpha 0
 //sino que el efecto comienze con el alpha que el 
 //elemento ya tiene.
 f.inAlph = f.inAlph || 0;
 f.intervalo = setInterval(
 function(){
 f.inAlph += 1/(f.seg*10);
 f.el.style.opacity = f.inAlph;
 if(f.inAlph >= 1){clearInterval(f.intervalo); f.onFadeEnd(f.el)};
 }, 100
 );
 },
 fadeout : function(){
 var f = fade;
 f.inAlph = f.inAlph || 1;
 f.intervalo = setInterval(
 function(){
 f.inAlph -= 1/(f.seg*10);
 f.el.style.opacity = f.inAlph;
 if(f.inAlph <= 0){clearInterval(f.intervalo); f.onFadeEnd(f.el);};
 },100
 );
 },
 onFadeEnd : function(){}
}

Ejemplo de uso:

window.onload = function(){
   document.getElementById('fade').onclick = function(){
      fade.onFadeEnd = function(e){
         document.getElementsByTagName('body')[0].removeChild(e);
      }
      fade.fadeF(this, 's', 2)
   }
}    

Para usar el objeto basta con llamar su método fadeF:

fade.fadeF()

Este método recibe tres parametros, el primero es el elemento al cual se le aplicará el fade, el segundo es el modo ‘s’ para salida y ‘e’ para entrada y el tercero es el tiempo que durará el efecto (en segundos).

fade.fadeF(elem, 's', 5);

Solo el primer parámetro es obligatorio. Los otros son opcionales y toman como default  s y 3 respectivamente.

Al terminar el efecto, se llama al método onFadeEnd() para simular eventos:

fade.onFadeEnd = function(){
//codigo de la funcion
}

a onFadeEnd se le puede pasar un parametro el cual regresa el nodo al cual se le aplico el fade:

fade.onFadeEnd = function(e){
alert(e);
}

Para entender más el uso de fade, te invito a que revises el código fuente del ejemplo.

Espero que encuentren útil este objeto. En unos días terminare los detalles. Como siempre, estoy abierto a criticas y sugerencias.

2 thoughts on “fadeObj.js –Nuevo script.

  1. Muy bueno! espero tengas más tiempo libre jajaja.

    Sería muy interesante que tuviera un método para hacer toggle y así no tener que especificar la “dirección” del fade.

    Un saludo amigo.

Comments are closed.