Foros del Web - Ver Mensaje Individual - esta funcion debe desplegararse mas rapido y depende del tiempo pero esta muy lenta

Franz1628 · #15 (**permalink**) 31/10/2011, 11:01

He ordenado un poco tu código y le he puesto botones en vez de links porque no se notaban, tambien he cambiado algunas variables que las tenias globales a locales.
Algo así

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body {
background-color: #FFCC99;
}
.contenedor{ width:700px; height:800px;}
a{
* * background:#FFCC00;
* * border: medium solid #666666;
}
-->
</style>
<script type="text/javascript">
 
 
function mover(obj){
    var p = parseInt(document.getElementById(obj).style.height);
    if(p>350){
        clearTimeout(t);
        return;
    }
    else{
        p+=5;
        document.getElementById(obj).style.height=p+'px';
        document.getElementById(obj).style.width=p+'px';
        var t=setTimeout( function(){ mover(obj) },30 ); 
    }
}
 
function restar(obj){
    var g=parseInt(document.getElementById(obj).style.height);
    document.getElementById("fg").innerHTML = g;
    if(g<=0){
        clearTimeout(tt);
        g=0;p=0;
        return;
    }
    g-=5;
    document.getElementById("fg").innerHTML =g;
    document.getElementById(obj).style.height=g+'px';
    document.getElementById(obj).style.width=g+'px';
    var tt=setTimeout( function(){ restar(obj) },30 ); 
} 
</script>
</head>
<body>
<input type="button" onclick="mover('cuadros')" value="cuadro uno mosatar"> &nbsp;
<input type="button" onclick="restar('cuadros')" value="cuadros uno pregar">&nbsp;
<input type="button" onclick="mover('cuadro')" value="cuadro dos"> &nbsp;
<input type="button" onclick="restar('cuadro')" value="cuadro dos pregar">
<div class="contenedor">
    <div id="cuadros" style="width:355px; height:355px; background-color:#F00; position:absolute; text-align:center; line-height:50px; color:white; top: 36px; left: 12px; overflow:hidden;" onClick="mover('cuadros')">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget auctor massa. Donec at lectus urna, at fermentum lorem. Maecenas lectus urna, fermentum a adipiscing nec, pharetra vel odio. Nulla sit amet enim at mi pulvinar rhoncus. Proin eleifend mauris in lectus feugiat aliquet. Nullam sit amet mauris quis sem sagittis faucibus a ut nisi. Vestibulum facilisis tincidunt urna, eget porttitor odio elementum in. Quisque accumsan augue quis risus faucibus vel euismod neque hendrerit. Vivamus blandit viverra mauris ut ullamcorper. Nulla facilisi. Nulla sit amet condimentum ligula. Mauris quis magna nibh, et auctor quam.</div>
    <div id="cuadro" style="width:355px; height:355px; background-color:#F00; position:absolute; text-align:center; line-height:50px; color:white; left: 367px; top: 36px; overflow:hidden;" onClick="mover('cuadros')">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget auctor massa. Donec at lectus urna, at fermentum lorem. Maecenas lectus urna, fermentum a adipiscing nec, pharetra vel odio. Nulla sit amet enim at mi pulvinar rhoncus. Proin eleifend mauris in lectus feugiat aliquet. Nullam sit amet mauris quis sem sagittis faucibus a ut nisi. Vestibulum facilisis tincidunt urna, eget porttitor odio elementum in. Quisque accumsan augue quis risus faucibus vel euismod neque hendrerit. Vivamus blandit viverra mauris ut ullamcorper. Nulla facilisi. Nulla sit amet condimentum ligula. Mauris quis magna nibh, et auctor quam.</div>
</div>
*<div id="fg"></div> *
* * 
</body>
</html>

Todavía hay un error cuando muestras y a la mitad quieres ocultar y viceversa.
Eso lo puedes hacer creo