Animação para div aparecer gradativamente (alterando dimensões)
Quinta-feira, Dezembro 13th, 2007 by micoxHopa.
Que tal ao invés de usar simplesmente o velho "display: block" pra deixar determinada div visível, usar uma animaçãozinha pra dar um efeito especial melhor no seu site.
Este tipo de coisa está disponível em todo framework javascript que se preze. Mas se você não tá afim de mexer com frameworks, é só adicionar a função abaixo na sua biblioteca:
function aparece(quem,speed){
//Aparece o 'quem' gradativamente na velocidade especificada em speed (high, normal, slow)
//by Micox - http://www.elmicox.com/2007/animacao-para-div-aparecer-gradativamente/
if(typeof(quem)=='string'){
quem = document.getElementById(quem);
}
if(typeof(window['micoxApareceGradativamente'+quem.id])!='undefined'){
//esta animação já está em execucao, saio
return true
}
var sty = quem.style;
sty.visibility = 'hidden'
var pos_init = sty.position;
sty.position = 'absolute';
if(sty.display=='none'){ sty.display = 'block' }
var alt_init = parseInt(quem.offsetHeight);
var lar_init = parseInt(quem.offsetWidth);
var over_ini = sty.overflow;
sty.overflow = 'hidden';
sty.visibility = 'visible';
sty.height = '0px';
sty.width = '0px';
if(typeof(quem.timeAparece)!='undefined'){
clearInterval(quem.timeAparece);
}
quem.timeAparece=null;
var loop = function(){
var alt_atu = parseInt(sty.height);
var lar_atu = parseInt(sty.width);
if(alt_atu < alt_init){
sty.height = (alt_atu + 5) + 'px';
}
if(lar_atu < lar_init){
sty.width = (lar_atu + 25) + 'px';
}
if(alt_atu == 0 ){
sty.position = pos_init;
}
if(alt_atu >= alt_init && lar_atu >= lar_init){
//acabou
clearInterval(quem.timeAparece);
delete window[’micoxApareceGradativamente’+quem.id];
sty.height = (alt_init) + ‘px’;
sty.width = (lar_init) + ‘px’;
sty.overflow = over_ini;
}
}
switch(speed){
case ‘high’: speed = 1; break;
case ‘normal’: speed = 20; break;
case ’slow’: speed = 40; break;
default: speed = 10;
}
window[’micoxApareceGradativamente’+quem.id] = true;
quem.timeAparece = setInterval(loop,speed);
}
Exemplo de uso (passando o ID):
<span onclick='aparece("apa","slow")'>clica</span>
<div id='apa' style='display: none; border: 1px solid black;'>asdfçlaksdfçl alsjdfçlajsdçlfjaçsldjfçlajsdçflj açlsdfjksd
asdfaslçkdfjçlaj<br />aç jdfljaçsldjkfçlaskjd f<br />lça jçdfljaçsdl fjkçalsjdf çlkajsçdlf</div>
Ou passando a referencia do elemento:
<span onclick='aparece(document.getElementById("apa"),"slow")'>clica</span>
<div id='apa' style='display: none; border: 1px solid black;'>asdfçlaksdfçl alsjdfçlajsdçlfjaçsldjfçlajsdçflj açlsdfjksd
asdfaslçkdfjçlaj<br />aç jdfljaçsldjkfçlaskjd f<br />lça jçdfljaçsdl fjkçalsjdf çlkajsçdlf</div>
