function fade(id,tiempo,ancho,alto){
//Validamos argumentos de la funcion
id = typeof id == 'string'? document.getElementById(id):id; //Obtenemos el elemento
ancho = typeof ancho == 'number'? ancho:id.offsetWidth; //Si no se espeficia el ancho, usamos el del elemento actual
alto = typeof alto == 'number'? alto:id.offsetHeight; //Si no se especifica el alto, usamos el del elemento actual
//Declaramos nuestras variables
var tiemporef = ((tiempo*1000)-((tiempo*1000)*0.1)); //El tiempo que tenemos disponible
var altoPlus = ((alto*0.9)/(((alto*0.9) * tiemporef) / ((alto*0.9)+ancho)))*10; //Alto a aumentar en cada intervalo
var anchoPlus = (ancho/((ancho * tiemporef) / ((alto*0.9)+ancho)))*10; //Ancho a aumentar en cada intervalo
var anchoActual = 1; //Ancho actual en todo momento
var altoActual = 1; //Alto actual en todo momento
var opac = 0; //Opacidad en todo momento
var horFade; //Intervalo Horizontal
var verFade; //Intervalo Vertical
var textFade; //Intervalo de texto
var maxalto = alto*0.2; //Variaciones del alto
var maxaumento = maxalto/((tiempo*1000)*0.1)*10; //Aumento en el primer round
var posicion = id.style.position; //Guardamos la posicion
var izq = id.style.left //Guardamos left atributo
var arr = id.style.top //Guardamos top atributo
var xpos = id.offsetLeft+(ancho/2); //Posicion nueva
var ypos = id.offsetTop+(alto/2); //Posicion nueva
var div = document.createElement('div'); //Creamos contenedor
div.innerHTML = id.innerHTML; //Le asignamos el contenido del elemento actual a nuestro contendor
id.innerHTML = ''; //Borramos el contenido de nuestro elemento actual
//Si tiene otro tipo de posicionamiento, creamos un pace holder
if(posicion != 'absolute'){
var spaceholder = document.createElement(id.tagName); //Space-holder
for (i=0;i<id.attributes.length;i++){
if (id.attributes[i].specified){
spaceholder.setAttribute(id.attributes[i].nodeName,id.attributes[i].value);
}
}
//IE Styles
if(!id.getAttributeNode('style').nodeValue){
var iestyle = id.style;
for(k in iestyle)
spaceholder.style[k] = id.style[k];
}
//Suprimimos cualquier background
spaceholder.style.background = 'none';
//Insertamos el spaceholder
id.parentNode.insertBefore(spaceholder,id);
}
//Nuevos estilos al elemento
id.style.position = 'absolute'; //Sobreponemos este elemento al spaceholder, si existe
id.style.height = '1px'; //Inicia con un 1px al cuadrado
id.style.width = '1px';
id.style.left = xpos+'px'; //Le damos posicion
id.style.top = xpos+'px';
id.style.display = 'block'; //Lo hacemos visible
verFade= setInterval('fade.verFadeIt('+maxalto+','+maxaumento +')',10); //Iniciamos cadena de intervalos
//Se encarga de la anchura
fade.horFadeIt= function(anchoaumento){
if(anchoActual+anchoaumento <= ancho){
id.style.width = (anchoActual+=anchoaumento)+'px';
if(xpos > 0)
id.style.left = (xpos-=anchoaumento/2) +'px';
}
else{
id.style.width = (anchoActual=ancho)+'px';
clearInterval(horFade);
verFade= setInterval('fade.verFadeIt('+alto+','+altoPlus+')',10);
}
}
//Se encarga de la altura
fade.verFadeIt = function(alturaMax,aumento){
if(altoActual+aumento <= alturaMax){
id.style.height = (altoActual+=aumento)+'px';
if(ypos > 0)
id.style.top = (ypos-=aumento/2) +'px';
}
else {
id.style.height = (altoActual=alturaMax)+'px';
id.style.top = Math.round(ypos);
clearInterval(verFade);
if(anchoActual != ancho){
horFade= setInterval('fade.horFadeIt('+anchoPlus+')',10);
}
else if(altoActual == alto){ //Llegando aqui hemos termiando la animacion, procedemos con el texto
if(spaceholder) id.parentNode.removeChild(spaceholder) //Eliminamos el space holder, si existe
id.style.position = posicion; //Reposicionamos
id.style.left = izq;
id.style.top = arr;
div.style.opacity = 0; //Opacidad de nuestro contenido a cero
div.style.zoom = 1; //IE HasLayout
div.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
id.appendChild(div); //Insertamos contenido
textFade = setInterval(fade.textFadeIt,tiempo*10);
}
}
}
fade.textFadeIt = function(){
if(opac < 1){
div.style.opacity = (opac+=0.01);
div.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity='"+((opac+=0.01)*100)+")";
}
else{
clearInterval(textFade);
}
}
}