Cambiar efecto de desplegado

Luis10 · #1 (**permalink**) 04/09/2007, 01:55

Hola!

Me gustaria cambiar el efecto de desplegado de un menu, es decir, el menu siempre se despliega "de golpe" en un solo instante, a mi m gustaria ralentizarlo y hacerlo distinto, como puedo hacerlo? de momento lo despliego utilizando setVisible() por eso m hace visible el menu al instante.

P.D: Lo q intento es parecido al de los menus de esta pagina, q al hacer click a las opciones se despliega progresivamente.

Gracias y un saludo!

derkenuke · #2 (**permalink**) 05/09/2007, 19:07

Una pregunta tonta, ¿Cuál es ese método setVisible()?

Luis10 · #3 (**permalink**) 25/09/2007, 02:42

Hola Buenas!!

Me gustaria haber si alguien me podria dar algun otro ejemplo, es q el Javascript de este es muy pesado, en cuanto al metodo setVisible(), lo utilizo para mostrar la capa que quiero desplegar, y m lo ace de un tiron, mientras q yo kiero q m lo aga de forma expandible o graduar.

Gracias y un saludo!

derkenuke · #4 (**permalink**) 25/09/2007, 14:10

Hola Luis10, creo que eso lo tienes que hacer con la propiedad de las capas clip, o haciendo clipping, que es lo mismo. Podrás encontrar todo lo relacionado con ello en internet fácilmente.

Un saludo.

Luis10 · #5 (**permalink**) 26/09/2007, 00:26

Gracias! pero lo q veo es q la propiedad Clip lo q hace es mostrarte la capa tb de una vez(recortando la zona a mostrar), y no progresivamente como yo quiero.
Un saludo!

derkenuke · #6 (**permalink**) 26/09/2007, 17:34

Sí, sirve para recortar.

Es decir, primero tendrías que recortar todo y hacerlo visible (en ese momento el DIV estará visible, pero midiendo 0px de alto). Luego sigues aumentando su altura (variando el clipping) y el efecto será de despliegue dinámico.

Un saludo.

Luis10 · #7 (**permalink**) 08/10/2007, 08:09

Buenas!!

Ya tengo el efecto de desplegado q queria...pero en Explorer, en firefox no m funciona aunq no m salta ningun error en la consola...adjunto el codigo del pekeño ejemplo q e echo aber si alguien puede decirme algo para q m funcione en firefox.

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
 
 
 
<script language="JavaScript" type="text/javascript"> 
 
 
var imagen 
 
function Inicio() 
{ 
             
        imagen = divImagen.style 
               divImagen.style.clip="rect(0px 0px 0px 0px)"; 
} 
 
function LeeRecorte (objeto,borde) 
{ 
     
     
        var vectorRecorte = objeto.clip.split("rect(")[1].split(")")[0].split("px") 
     
        if (borde=="superior") 
        return Number(vectorRecorte[0]) 
        if (borde=="derecho")  
        return Number(vectorRecorte[1]) 
        if (borde=="inferior")  
        return Number(vectorRecorte[2]) 
             if (borde=="izquierdo")  
        return Number(vectorRecorte[3]) 
     
} 
 
function RecorteRelativo (objeto,superior,derecho,inferior,izquierdo)  
{ 
     
        objeto.clip = "rect("+(this.LeeRecorte(objeto,'superior')+superior)+"px "+(this.LeeRecorte(objeto,'derecho')+derecho)+"px "+Number(this.LeeRecorte(objeto,'inferior')+inferior)+"px "+Number(this.LeeRecorte(objeto,'izquierdo')+izquierdo)+"px)" 
} 
 
function AnimarRecorte() 
{ 
     //divImagen.style.clip="rect(0px 0px 0px 0px)"; 
    //alert("ENTRA1"); 
    if (LeeRecorte(imagen,'derecho') > 0) 
    { 
    //alert("ENTRA2"); 
        RecorteRelativo (imagen,0,-14,-10,0) 
    setTimeout ("AnimarRecorte()",50) 
    } 
     
} 
 
function RestaurarImagen() 
{ 
     //divImagen.style.clip="rect(0px 0px 0px 0px)"; 
   // divImagen.style.visibility="visible"; 
   //alert(divImagen.style.clip); 
    if (LeeRecorte(imagen,'derecho') < 500) 
    { 
    RecorteRelativo (imagen,0,14,10,0) 
    setTimeout ("RestaurarImagen()",30) 
    } 
} 
 
 
</SCRIPT> 
</HEAD> 
 
<body onLoad="Inicio()"> 
 
 
 
<a href="javascript:AnimarRecorte()">Cerrar Capa</a> <br> 
<a href="javascript:RestaurarImagen()">Abrir capa</a>  
<div style="background-color:blue; width:600; height:958;z-index:1"> 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii 
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</div> 
<div ID="divImagen" STYLE="position:absolute; left:50; top:125; width:500; height:358;  border:1px solid red;z-index:2;background-color:red"> 
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC 
CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC 
CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC 
CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC 
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD 
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD 
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD 
EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE 
EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE 
EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE 
EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE 
EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE 
EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE 
</div> 
 
</body> 
</html>

Gracias y un saludo!

Luis10 · #8 (**permalink**) 09/10/2007, 03:37

Buenas!!

Acotando el posible error, he visto q una funcion q m lee el recorte que quiero hacer me devuelve "NaN" en Firefox, por eso no m funciona, mientras en Explorer m lo devuelve bien. Se refiere a esta linea:

Código PHP:

  var vectorRecorte = objeto.clip.split("rect(")[1].split(")")[0].split("px")

que se encuentra en esta función:

Código PHP:

  function LeeRecorte (objeto,borde) 
{ 
    //alert("Leer recorte"); 
     
        var vectorRecorte = objeto.clip.split("rect(")[1].split(")")[0].split("px") 
     
        if (borde=="superior") 
        return Number(vectorRecorte[0]) 
        if (borde=="derecho")  
        return Number(vectorRecorte[1]) 
        if (borde=="inferior")  
        return Number(vectorRecorte[2]) 
             if (borde=="izquierdo")  
        return Number(vectorRecorte[3]) 
     
}

No se muy bien como hacerla compatible para los dos navegadores, haber si alguien m puede dar alguna idea.

Gracias y un saludo!!

derkenuke · #9 (**permalink**) 09/10/2007, 12:15

Hola de nuevo Luis10, veo que vamos avanzando hacia donde queríamos:

He podido comprobar que mientras IE guarda el valor de clip así:
rect(0px 0px 0px 0px)
Firefox lo almacena con comas:
rect(0px, 0px, 0px, 0px)
De modo que hay que hacer split por "px" ó por "px,", y tú sólo lo hiciste por "px" simple.

Lo que he hecho es, simplemente, convertir las comas existentes en nada (osea, eliminar las comas si las hubiere):

Código PHP:

  var vectorRecorte = objeto.clip.split("rect(")[1].split(")")[0].replace(/,/g, "").split("px");

Y he podido comprobar que funciona bien tanto en IE como en FF.

También he notado que si pulsamos Abrir capa y mientras está animando pulsamos Cerrar Capa, no se va a cerrar inmediatamente, va a esperar a que se abra. Se puede solucionar cómodamente agregando una variable global al sistema (la he llamado animando), y llamando a los setTimeout's que animan de esa manera. Antes de establecer un animando comprobamos si ya se estaba ejecutando otro:

Tanto en AnimarRecorte():

Código PHP:

      if(animando) clearTimeout(animando); 
    animando = setTimeout ("AnimarRecorte()",50)

Como en RestaurarImagen():

Código PHP:

      if(animando) clearTimeout(animando); 
    animando = setTimeout ("RestaurarImagen()",30)

Y ya verás que va todo como la seda.

Un saludo.

Luis10 · #10 (**permalink**) 10/10/2007, 09:34

Muchas gracias por tu interes derkenuke!!

Un saludo!

derkenuke · #11 (**permalink**) 11/10/2007, 16:34

De nada, para eso estamos aquí.

Hasta otra