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