Foros del Web » Programando para Internet » Jquery »

JQuery Mostrar y Ocultar divs o columnas usando timer

Estas en el tema de JQuery Mostrar y Ocultar divs o columnas usando timer en el foro de Jquery en Foros del Web. Hola Tengo una duda. Soy nueva usando JQuery, y quiero hacer lo siguiente: Tengo una tabla con 5 columnas, quiero mostrar una columna por una, ...
  #1 (permalink)  
Antiguo 06/10/2010, 04:22
 
Fecha de Ingreso: mayo-2006
Mensajes: 243
Antigüedad: 17 años, 10 meses
Puntos: 0
Pregunta JQuery Mostrar y Ocultar divs o columnas usando timer

Hola
Tengo una duda.

Soy nueva usando JQuery, y quiero hacer lo siguiente:

Tengo una tabla con 5 columnas, quiero mostrar una columna por una, primero mostrar la primer columna, despues de 5 segundos, esconderla y mostrar la 2da columna, y asi, hasta mostrar la 5ta y volver a la primera

Todo esto automaticamente, sin presionar algun boton

Si es mas facil, pudiera cambiar las columnas por divs

Podrian ayudarme por favor!!...
  #2 (permalink)  
Antiguo 06/10/2010, 07:39
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años
Puntos: 101
Respuesta: JQuery Mostrar y Ocultar divs o columnas usando timer

En javascript existe el setTimeOut();

Para encadenar, quizas te sirva leer esto:
http://www.desarrolloweb.com/articul...os-jquery.html
  #3 (permalink)  
Antiguo 06/10/2010, 08:21
 
Fecha de Ingreso: diciembre-2009
Ubicación: Misiones
Mensajes: 867
Antigüedad: 14 años, 3 meses
Puntos: 65
Respuesta: JQuery Mostrar y Ocultar divs o columnas usando timer

Esto lo hice con divs, en realidad modifiqué de una lista solo modificando el selector, lo mismo podés usar para columnas, párrafos, span, celdas, si te fijas bien no es nada complicado, esconder uno, mostrar el siguiente
fijate bien los ejemplos de la doc de jquery para recorrer los elementos http://api.jquery.com/category/traversing/
bueno, y selectores, manipulación, efectos y todo

Código Javascript:
Ver original
  1. <html>
  2. <head>
  3. <title>Prueba</title>
  4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  5. <script type="text/javascript">
  6. $( function(){  
  7.     //Muestro el primer div
  8.     $("#columnas div:eq(0)").show();
  9.     //cada 1 segundo ejecuto la función mostrar()
  10.     setInterval("mostrar()",1000);
  11. });
  12. mostrar = function(){
  13.     //Oculto el div que se encuentra vivisble
  14.     var div = $("#columnas div:visible").hide();
  15.     //Selecciono el siguiente div que oculte en el paso anterior
  16.     divNext = div.next();
  17.     //Si existe otro div después lo muestro, si no existe quiere decir que es el último, entonces muestro el primero para que la próxima vez que se ejecute la función continue con el segundo
  18.     if(divNext.length){
  19.         divNext.show();
  20.     } else {
  21.         $("#columnas div:eq(0)").show();
  22.     }
  23. };
  24. </script>
  25. <style>
  26.     #columnas>div{width:50px; height:300px; display:none}
  27.     #uno{background:red}
  28.     #dos{background:blue}
  29.     #tres{background:green}
  30.     #cuatro{background:black}
  31. </style>
  32. </head>
  33. <body>
  34. <ul id="columnas">
  35.         <div id="uno"></div>
  36.     <div id="dos"></div>
  37.     <div id="tres"></div>
  38.     <div id="cuatro"></div>
  39. </ul>
  40. </body>
  41. </html>

Etiquetas: columnas, time
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:33.