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.