Hola:
La verdad es que el código que pensaba era algo más sencillo:
Código:
<html>
<head>
<title>
efecto
</title>
<script type="text/javascript">
function tag(id) {
return document.getElementById(id);
}
function ocultar(que) {
tope = parseInt(tag(que).style.top);
papi = parseInt(tag(que).parentNode.style.height);
tag(que).style.top = ++tope + "px";
if (tope == papi) {
tag("ocultar").disabled = true;
tag("mostrar").disabled = false;
}
else
setTimeout("ocultar('" + que + "')", 10);
}
function mostrar(que) {
tope = parseInt(tag(que).style.top);
papi = parseInt(tag(que).parentNode.style.height);
tag(que).style.top = --tope + "px";
if (tope == 0) {
tag("ocultar").disabled = false;
tag("mostrar").disabled = true;
}
else
setTimeout("mostrar('" + que + "')", 10);
}
</script>
</head>
<body >
<div id="contenedor" style="position: relative; height: 120px; width: 120px; overflow: hidden">
<div id="azul" style="width: 120px; height: 120px; background-color: blue; position: absolute; top: 0; left: 0; ">Esta capa se mostrará y se ocultará...</div>
</div>
<button id="ocultar" onclick="ocultar('azul')" >ocultar</button>
<button id="mostrar" onclick="mostrar('azul')" disabled >mostrar</button>
</body>
</html>
Saludos
