Animar capas

deprabado · #1 (**permalink**) 04/07/2006, 17:59

He estado buscando en el foro y google y no he encontrado como hacer lo que quiero, o por lo menos que me ayuden.

el caso es que tengo 2 capas ocultas, mediante css y javascript las muestro dependiendo de lo que quiera visualizar.

este es el codigo:

function mostrar(capa) {
if (document.getElementById(capa).style.display == "block"){
document.getElementById(capa).style.display = "none";
}
else{
document.getElementById('artrelacionados').style.d isplay = "none";
document.getElementById('comentarios').style.displ ay = "none";
document.getElementById(capa).style.display = "block";
}

Ahora si bien el codigo me permite mostrar y/o ocultar las capas segun quiera ahora quiero que la capa se muestre con una pequeña animacion, algo asi como si creciera, parecido al efecto del boton buscar de este foro.

no he podido hacerlo, alguien me podria ayudar????

pinchoso · #2 (**permalink**) 05/07/2006, 05:19

Hola deprabado,

te dejo un ejemplo a ver que te parece.
Creo que el código original apareció en el foro hace un tiempo, aunque no recuerdo quien es el autor, lo he modificado para que haga algo similar a lo que tu pides, aunque deberás adaptarlo a tus necesidades:

Código:

 
<html>
<head>
<script>
function mostrar(capa) {
document.getElementById('capa').style.display = "block";
} 
function tamanno(){
 obj=document.getElementById('capa');
 obj.style.width=parseInt(obj.style.width)+5+'px';
 obj.style.height=parseInt(obj.style.height)+5+'px';
  if(parseInt(obj.style.width)>=200){
   obj.style.width='200px';
   obj.style.height='200px';
   clearInterval(t);
   //alert("pausa");
  }
}
</script>
</head>
<body>
<table style="width:0;height:0;border:1px solid #0000FF;display:none" cellpadding="0" cellspacing="0" id="capa" >
  <tr>
    <td width="0"></td>
  </tr>
</table>  
<input type="submit" name="Submit" value="Ver" onclick="mostrar('capa');t=setInterval('tamanno()',10)" />
</body>
</html>

Saludos!

Azrael666 · #3 (**permalink**) 05/07/2006, 05:35

tengo que hacer la gracia.. no lo puedo evitar

..... :

Cita:

Animar capas

PONLES MUSICA

dicha la tonteria... yo tengo este codigo que mueve capas verticalmente entre dos posiciones que tu le das:

Código HTML:

var nc = (document.layers) ? true:false
var ie = (document.all) ? true:false
var n6 = (document.getElementById) ? true:false
var posicion;
var nueva_posicion;
var aux=10;
var tam;
var absol;
function posactual() {return aux;} 	
function muevelo(ini,pos)
{ 
posicion=ini;     
	  tam=10;  
	 if ((ini>pos) && ((ini-pos)<10)) tam=ini-pos;
	 if ((ini>pos) && ((ini-pos)>10)) tam=10;
	 if ((ini<pos) && ((pos-ini)<10)) tam=ini-pos;
	 if ((ini<pos) && ((pos-ini)<10)) tam=10;	  
	  if (ini<pos)  nueva_posicion=posicion+tam					
 	  else if (ini>pos) nueva_posicion=posicion-tam						
	  else nueva_posicion=pos;	  
	  aux=pos;	  
	  if(nueva_posicion!=pos)
      {
        if(ie) document.all['base'].style.top=nueva_posicion;
        else if(nc) document.layers['base'].top=nueva_posicion;
        else if(n6) document.getElementById('base').style.top=nueva_posicion;          
        posicion=nueva_posicion;
        setTimeout("muevelo(posicion,aux)",0);
      }
    }

llamada, desde un link por ejemplo:

onclick:'muevelo(posiciondesalida,posicionfinal);'

SiR.CARAJ0DIDA · #4 (**permalink**) 05/07/2006, 07:05

el no quiere mover la capa.. quiere darle efecto como los menues del vbulletin, tenes que usar overflow:hidden e ir agrandando el ancho y alto de la capa.

Azrael666 · #5 (**permalink**) 05/07/2006, 07:41

hombre.. animar una capa puede ser moverla no?

deprabado · #6 (**permalink**) 05/07/2006, 15:07

Es lo que estaba buscando pero ahora tengo un problemita....

si defino los atributos de la capa en mi hoja de estilos sencillamente no funciona...

otra cosa, en explorer no funciona cuando la capa tiene contenido en realidad se comporta muy extraño...

pinchoso · #7 (**permalink**) 06/07/2006, 00:55

Buenos dias,

a mi en explorer me funciona bien, el unico problema es que 200px de altura no son suficientes para ver todo el contenido de tu capa, pero a parte de eso a mi me funciona correctamente.

Lo de los estilos no acabo de entender porque no te funciona si los defines en la hoja de estilos, si lo haces en el propio documento si?

deprabado · #8 (**permalink**) 06/07/2006, 23:34

El tamaño era solo prueba... pero si ese es el error, si defino el tamaño inicial en la hoja de estilos no funciona, si por el contrario lo hago en la capa si lo hace... muy extraño, voy a revisar si tengo los estilos duplicados o algo asi a ver