Últimamente he estado intentando hacer alguna animación por medio de Javascript. Si os preguntáis por qué, la razón es porque quería saber como funcionaban todas las de jQuery, por ejemplo.
Para hacerlas, además de ponerme al día con el Javascript clásico, he tenido que aprender a usar el mátodo setTimeout.
Lo que hace setTimeout es llamar a una función dentro de x tiempo, así que si usamos en una función setTimeout sobre ella misma, se irá repitiendo. Y si le pones un condicional determinado, parará cuando llegue a un momento concreto.
Supongo que será de ayuda a aquellos que no quieren usar librerías como jQuery. Por ahora llevo hechas una para mover algo hacia abajo (que no costaría hacer una para los lados), y otra para expandir y contraer elementos (con atra función para cada ejemplo).
Pues ahora que ya sabemos cómo funciona vamos con los ejemplos y el código:
Quiero aclarar que sí, sé que parece muy lento, y es que el navegador se satura mucho (ya que la página es muy grande), pero estoy intentando arreglarlo. Lo consiga o no, yo sigo recomendando una librería como jQuery o Prototype+Scriptaculous
El script
/*********************************************************
* FUNCIONES DE MEDIDAS
*/
function alturaAuto(elem){
var id=document.getElementById(elem);
var alturaTotal=id.offsetHeight;
//Padding Top
var paddingTop=parseInt(window.getComputedStyle(id).getPropertyValue("padding-top"));
//paddingBottom
var paddingBottom=parseInt(window.getComputedStyle(id).getPropertyValue("padding-bottom"));;
//borderTop
var borderTop=parseInt(window.getComputedStyle(id).getPropertyValue("border-top"));
//borderBottom
var borderBottom=parseInt(window.getComputedStyle(id).getPropertyValue("border-bottom"));;
var altura=alturaTotal-paddingTop-paddingBottom-borderTop-borderBottom;
return altura;
}
/*********************************************************
* Animaciones
*/
/*===================================================
* Mover Abajo
*/
function abajo(elem,pix,time){
var id=document.getElementById(elem);
var top=parseInt(window.getComputedStyle(id).getPropertyValue("top"))
if (window.getComputedStyle(id).getPropertyValue("top")=="auto"){top=0;}
if( top < pix){
id.style.top=top+1+'px';
Timeout=setTimeout("abajo('"+elem+"',"+pix+")",time)
}else{
Timeout=undefined;
return false;
}
}
function moverabajo(elem,pix,tiempo){
var time=tiempo/pix;
var id=document.getElementById(elem);
var position=window.getComputedStyle(id).getPropertyValue("position");
if(position=="static"){id.style.position="relative"}
abajo(elem,pix,time);
}
/*====================================================
* Expandir
*/
function expandirAbajo(elem,altura,time){
var id=document.getElementById(elem);
if (id.style.display=="none"){
id.style.height="0px";
id.style.visibility="visible";
id.style.display="block";
id.style.overflow="hidden";
}
if (parseInt(id.style.height)<altura){
id.style.height=parseInt(id.style.height)+1+'px';
Timeout=setTimeout("expandirAbajo('"+elem+"',"+altura+","+time+")")
}else{
Timeout=undefined;
return false;
}
}
function expandir(elem,tiempo){
var id=document.getElementById(elem);
if (id.style.display!="none"&&id.style.display){return false;}
id.style.visibility="hidden";
id.style.display="block";
var altura=window.getComputedStyle(id).getPropertyValue("height");
if(altura=="auto"){altura=alturaAuto(elem)}else{altura=parseInt(altura)}
id.style.display="none";
var time=tiempo/altura;
expandirAbajo(elem,altura,time);
}
/*======================================================================
* Contraer
*/
function contraerArriba(elem,altura,time){
var id=document.getElementById(elem);
id.style.overflow="hidden";
if (parseInt(id.style.height)>0){
id.style.height=parseInt(id.style.height)-1+'px';
Timeout=setTimeout("contraerArriba('"+elem+"',"+altura+")",time);
}else{
id.style.display="none";
id.style.height=altura+'px';
Timeout=undefined;
return false;
}
}
function contraer(elem,tiempo){
var id=document.getElementById(elem);
if (id.style.display=="none"){return false;}
var altura=window.getComputedStyle(id).getPropertyValue("height");
if(altura=="auto"){altura=alturaAuto(elem)}else{altura=parseInt(altura)}
id.style.height=altura+'px';
var time=tiempo/altura;
contraerArriba(elem,altura,time);
}
/*======================================================================
* Expandir/Contraer
*/
function expandirContraer(elem,tiempo){
var id=document.getElementById(elem);
if(typeof(Timeout) != "undefined"){return false;}
if(window.getComputedStyle(id).getPropertyValue("display")=="none"){
expandir(elem,tiempo);
}else{
contraer(elem,tiempo);
}
}
Cómo usarlo
Para usarlo sólo tenéis que tener un div con una id (el que queráis animar), y otro (o él mismo) con un atributo onclick, onmouseover. Sería algo así:
<div onclick="nombreDeLaFuncion('IdDelObjetoAAnimar',píxels,Tiempo)">...Contenido del div sobre el que se va a hacer click...</div>
«nombreDeLaFuncion» tiene que ser expandir, contraer, expandirContraer o moverabajo. El valor de píxels sólo será necesario en moverabajo
Espero que os séa útil. Si tenéis alguna duda, comentad y os la resolveré lo antes posible.