Repetir conjunto de funciones cada X segundos

[eduhernan]

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

[alberto510a]

Hola.

Imaginemos que tienes esto:

Código Javascript:

$( "#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 })
 

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

Código Javascript:

function slidelink01(){
 
              $( "#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 })
            
}
 

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:

$(document).ready(function(){
 
function slidelink01(){
              $( "#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 })          
}
 
window.setInterval(slidelink01(),1000);
 
});
 

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.