retardar un movimiento en opciones de menu

mensajeescrito · #1 (**permalink**) 22/01/2014, 16:52

Hola amigos, verán tengo una duda sobre un código que os muestro a continuación,

y que consiste en que muestra una serie de rectángulos que suben o bajan según la opción de menú en la que hagamos click.

Esto como digo lo hace perfectamente pero el problema que tengo es que necesito que cuando se haga click en un botón del menú para bajar o subir cada uno de los rectángulos , lo haga pasados un par de segundos y que no lo haga de manera inmediata como es como lo hace en este momento.

El código es el siguiente, (por cierto el código tiene javascript + css y html pero no puedo separarlo en este post y poner solo la parte javascript por que sino lo mismo no se entendería del todo):

Código Javascript:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<style type="text/css">
    #parrafo1, #parrafo2, #parrafo3, #parrafo4, #parrafo5, #parrafo6, #parrafo7, #parrafo8, #parrafo9 {
        position:absolute; top:100px;
        width:100px; height:50px; background-color: #99FFFF;
    }
    #parrafo1 {left:0px;}
    #parrafo2 {left:110px;}
    #parrafo3 {left:220px;}
    
    #parrafo4 {left:330px;}
    #parrafo5 {left:440px; top:310px;}
    #parrafo6 {left:550px;}
    
    #parrafo7 {left:660px;}
    #parrafo8 {left:770px;}
    #parrafo9 {left:880px;}     
    
    ul {
        padding:0px;
    }
    li {
        float:left;
        list-style-type:none;
        padding-left:10px;
        cursor:pointer;
    }
</style>
 
<script type="text/javascript">
    function MoverTexto(id,d)
    {
        for(var i=1;i<=9;i++)
        {
            var bloque=document.getElementById("parrafo"+i);
            if(i==id)
            {
                if(d=="arriba")
 
                    bloque.style.top="310px";
            }else{
                bloque.style.top="100px";
            }
        }
    }
</script>
 
</head>
 
<body>
    <ul>
        <li onclick="MoverTexto('1', 'arriba');">Opcion 1</li>
        <li onclick="MoverTexto('2', 'arriba');">Opcion 2</li> 
        <li onclick="MoverTexto('3', 'arriba');">Opcion 3</li>        
        <li onclick="MoverTexto('4', 'arriba');">Opcion 4</li> 
        <li onclick="MoverTexto('5', 'arriba');">Opcion 5</li> 
        <li onclick="MoverTexto('6', 'arriba');">Opcion 6</li> 
        <li onclick="MoverTexto('7', 'arriba');">Opcion 7</li> 
        <li onclick="MoverTexto('8', 'arriba');">Opcion 8</li> 
        <li onclick="MoverTexto('9', 'arriba');">Opcion 9</li>        
       
    </ul>
 
    <div id="parrafo1"></div>
    <div id="parrafo2"></div>
    <div id="parrafo3"></div>
    <div id="parrafo4"></div>
    <div id="parrafo5"></div>
    <div id="parrafo6"></div>
    <div id="parrafo7"></div>
    <div id="parrafo8"></div>
    <div id="parrafo9"></div>
    
</body>
</html>

Gracias de antemano.

Alexis88 · #2 (**permalink**) 22/01/2014, 17:42

En los estilos, añade un tiempo de transición:

Código CSS:

Ver original#parrafo1, #parrafo2, #parrafo3, #parrafo4, #parrafo5, #parrafo6, #parrafo7, #parrafo8, #parrafo9 {
    position: absolute; 
    top:100px;
    width:100px; 
    height:50px; 
    background-color: #99FFFF;
    transition: top 1.5s;
}

Saludos

mensajeescrito · #3 (**permalink**) 23/01/2014, 05:29

Maravilloso lo de poner en el css esto que me has dicho:

Código XML:

Ver originaltransition: top 1.5s;

Pero aunque funciona muy bien (y es algo que desconocía que pudiera hacerse en css).

No consigo el efecto deseado que comento.

Veréis, seria que cuando una vez haya hecho clic en e uno de los botones para que baje uno de los rectángulos hacia abajo, digamos que bajara invisible y que una vez ya abajo se hiciera visible pasados un par de segundos mas o menos.

Espero haberme explicado mejor.

aun asi me has enseñado algo que desconocía y que me sea muy útil.

Pero si pudieran ayudarme en esto que me queda pendiente estaría muy agradecido.

Alexis88 · #4 (**permalink**) 23/01/2014, 09:17

En tal caso, retarda la acción con el método setTimeout:

Código Javascript:

Ver originalfunction MoverTexto(id,d)
{
    setTimeout(function(){
        for (i = 1; i <= 9; i++)
        {
            var bloque = document.getElementById("parrafo"+i);
            if (i == id)
            {
                if (d == "arriba")
                    bloque.style.top = "310px";
            }
            else
                bloque.style.top = "100px";
        } 
    }, 2000);
}

Lo que hace dicho método es ejecutar la función que se le pasa como primer parámetro al término del tiempo establecido en el segundo parámetro, que en este caso son 2000 milisegundos o 2 segundos. Vas a tener que quitarle el efecto que le añadí en CSS para que se vea como quieres.

Saludos

mensajeescrito · #5 (**permalink**) 23/01/2014, 13:44

Muchas gracias fenomeno!!!, me sirvió a la perfección.

Muchas gracias

y ya de paso si le sirve el código que puesto a alguien ahí lo tiene.

saludos.