Foros del Web » Programando para Internet » Jquery »

Repetir conjunto de funciones cada X segundos

Estas en el tema de Repetir conjunto de funciones cada X segundos en el foro de Jquery en Foros del Web. Hola, Tengo el siguiente script hecho, como una especie de "slide" en la portada de mi web, lo que ocurre es que debo tener un ...
  #1 (permalink)  
Antiguo 16/05/2013, 15:18
 
Fecha de Ingreso: octubre-2001
Ubicación: Las Palmas - Islas Canarias
Mensajes: 229
Antigüedad: 22 años, 5 meses
Puntos: 0
Repetir conjunto de funciones cada X segundos

Hola,

Tengo el siguiente script hecho, como una especie de "slide" en la portada de mi web, lo que ocurre es que debo tener un elemento que me desencadene estas funciones. La idea es sustituirlo completamente, y que cada X segundos las repita, creando un bucle, vamos, lo que viene siendo un "slide".

Código:
<script>
			
            $( "#slidelink01" ).click(function(){
              $( "#slide01" ).animate( { width: "700px" }, { queue: false, duration: 800 })
              $( "#slide02" ).animate( { width: "30px" }, { queue: false, duration: 800 })
              $( "#slide03" ).animate( { width: "20px" }, { queue: false, duration: 800 })
              $( "#slide04" ).animate( { width: "150px" }, { queue: false, duration: 800 })
            });
			
            $( "#slidelink02" ).click(function(){
              $( "#slide01" ).animate( { width: "50px" }, { queue: false, duration: 800 })
              $( "#slide02" ).animate( { width: "700px" }, { queue: false, duration: 800 })
              $( "#slide03" ).animate( { width: "50px" }, { queue: false, duration: 800 })
              $( "#slide04" ).animate( { width: "100px" }, { queue: false, duration: 800 })
            });
			
            $( "#slidelink03" ).click(function(){
              $( "#slide01" ).animate( { width: "50px" }, { queue: false, duration: 1000 })
              $( "#slide02" ).animate( { width: "10px" }, { queue: false, duration: 1000 })
              $( "#slide03" ).animate( { width: "790px" }, { queue: false, duration: 1000 })
              $( "#slide04" ).animate( { width: "50px" }, { queue: false, duration: 1000 })
            });
			
            $( "#slidelink04" ).click(function(){
              $( "#slide01" ).animate( { width: "50px" }, { queue: false, duration: 1000 })
              $( "#slide02" ).animate( { width: "20px" }, { queue: false, duration: 1000 })
              $( "#slide03" ).animate( { width: "50px" }, { queue: false, duration: 1000 })
              $( "#slide04" ).animate( { width: "780px" }, { queue: false, duration: 1000 })
            });
            </script>
"#slide01", "#slide02", "#slide03" y "slide04" son unos div que deseo que vayan cambiando de tamaño alternándose en el orden que están. Lo que deseo es que se desencadene automáticamente la secuencia, y no según los enlaces "#slidelink01 ... 04".
He estado leyendo sobre setInterval() y setTimeOut(), pero no tengo ni idea de cómo integrarlas a mi script.

Saludos y gracias de antemano,
Eduardo
  #2 (permalink)  
Antiguo 18/05/2013, 11:03
Avatar de alberto510a  
Fecha de Ingreso: abril-2013
Mensajes: 351
Antigüedad: 10 años, 10 meses
Puntos: 35
Respuesta: Repetir conjunto de funciones cada X segundos

Hola.

Imaginemos que tienes esto:

Código Javascript:
Ver original
  1. $( "#slide01" ).animate( { width: "700px" }, { queue: false, duration: 800 })
  2.               $( "#slide02" ).animate( { width: "30px" }, { queue: false, duration: 800 })
  3.               $( "#slide03" ).animate( { width: "20px" }, { queue: false, duration: 800 })
  4.               $( "#slide04" ).animate( { width: "150px" }, { queue: false, duration: 800 })

Para que eso fuera una función tan solo tendríamos que ponerlo entre function():

Código Javascript:
Ver original
  1. function slidelink01(){
  2.  
  3.               $( "#slide01" ).animate( { width: "700px" }, { queue: false, duration: 800 })
  4.               $( "#slide02" ).animate( { width: "30px" }, { queue: false, duration: 800 })
  5.               $( "#slide03" ).animate( { width: "20px" }, { queue: false, duration: 800 })
  6.               $( "#slide04" ).animate( { width: "150px" }, { queue: false, duration: 800 })
  7.            
  8. }

Bien, ahora hay 2 posibilidades setTimeOut (1 vez) setInterval (cada x tiempo) supongo que a ti te interesa más la segunda y que además comience a suceder tras la carga de la página:

Código Javascript:
Ver original
  1. $(document).ready(function(){
  2.  
  3. function slidelink01(){
  4.               $( "#slide01" ).animate( { width: "700px" }, { queue: false, duration: 800 })
  5.               $( "#slide02" ).animate( { width: "30px" }, { queue: false, duration: 800 })
  6.               $( "#slide03" ).animate( { width: "20px" }, { queue: false, duration: 800 })
  7.               $( "#slide04" ).animate( { width: "150px" }, { queue: false, duration: 800 })          
  8. }
  9.  
  10. window.setInterval(slidelink01(),1000);
  11.  
  12. });

De esta forma hacemos que cuando cargue el documento se cree una función y que cada 1000 milisegundos (1 segundo) suceda esta misma.

Saludos.

Etiquetas: cada, conjunto, funciones, repetir, segundos
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 11:42.