Tema: esta funcion debe desplegararse mas rapido y depende del tiempo pero esta muy lenta
Ver Mensaje Individual
  #16 (permalink)  
Antiguo 31/10/2011, 17:26
Avatar de jor_0203
jor_0203
 
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 13 años, 1 mes
Puntos: 8
Respuesta: esta funcion debe desplegararse mas rapido y depende del tiempo pero esta
Cita:
Iniciado por Franz1628 Ver Mensaje
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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Documento sin t&iacute;tulo</title>
  6. <style type="text/css">
  7. <!--
  8. body {
  9. background-color: #FFCC99;
  10. }
  11. .contenedor{ width:700px; height:800px;}
  12. a{
  13. * * background:#FFCC00;
  14. * * border: medium solid #666666;
  15. }
  16. -->
  17. </style>
  18. <script type="text/javascript">
  19.  
  20.  
  21. function mover(obj){
  22.     var p = parseInt(document.getElementById(obj).style.height);
  23.     if(p>350){
  24.         clearTimeout(t);
  25.         return;
  26.     }
  27.     else{
  28.         p+=5;
  29.         document.getElementById(obj).style.height=p+'px';
  30.         document.getElementById(obj).style.width=p+'px';
  31.         var t=setTimeout( function(){ mover(obj) },30 ); 
  32.     }
  33. }
  34.  
  35. function restar(obj){
  36.     var g=parseInt(document.getElementById(obj).style.height);
  37.     document.getElementById("fg").innerHTML = g;
  38.     if(g<=0){
  39.         clearTimeout(tt);
  40.         g=0;p=0;
  41.         return;
  42.     }
  43.     g-=5;
  44.     document.getElementById("fg").innerHTML =g;
  45.     document.getElementById(obj).style.height=g+'px';
  46.     document.getElementById(obj).style.width=g+'px';
  47.     var tt=setTimeout( function(){ restar(obj) },30 ); 
  48. } 
  49. </script>
  50. </head>
  51. <body>
  52. <input type="button" onclick="mover('cuadros')" value="cuadro uno mosatar"> &nbsp;
  53. <input type="button" onclick="restar('cuadros')" value="cuadros uno pregar">&nbsp;
  54. <input type="button" onclick="mover('cuadro')" value="cuadro dos"> &nbsp;
  55. <input type="button" onclick="restar('cuadro')" value="cuadro dos pregar">
  56. <div class="contenedor">
  57.     <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>
  58.     <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>
  59. </div>
  60. *<div id="fg"></div> *
  61. * * 
  62. </body>
  63. </html>

Todavía hay un error cuando muestras y a la mitad quieres ocultar y viceversa.
Eso lo puedes hacer creo
ya lo vi
y si tienes razón
es cuando esta a la mitad
pero esta función esta quedando muy bien
va atener un gran uso
paro todos los de la comunidad
uso de capas dinámicas con movimiento
voy haber como le hago para mejorar el código
mil gracias