setTiamout y Loop

Bluesman74cl · #1 (**permalink**) 11/02/2015, 12:43

Cómo están, yo medio complicado con un código.

Quiero pasarle el indice incrementado pero no me resulta. Alguna idea? desde ya muchas gracias

Código HTML:

Ver original<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<style>
#heading1, #heading2, #heading3, #heading4{
    position: absolute;
    left: -500px;
    }
</style>
 
<script type="text/javascript">
$(document).ready(function() {
    loops=10000;
    indice=1;
    for(loops=0;loops<=10;loops++){
        setTimeout(function() {
            slide(indice);          
        }, 1000);
    }
});
    
    function slide(indice){
         $('#heading'+indice).css({opacity: 0}).animate({opacity: 1.0,left: "50px"}, 1000).delay(2000);
         $('#heading'+indice).css({opacity: 0}).animate({opacity: 0,left: "-50px"}, 1000);      
    }
</script>
</head>
 
<body>
<span id="heading1">00000</span>
<span id="heading2">111111</span>
<span id="heading3">222222</span>
<span id="heading4">333333</span>
</body>
</html>

Bluesman74cl · #2 (**permalink**) 11/02/2015, 12:50

Ammm ya lo hice pero el resultado no me gustó.

Modifiqué esta parte

Código Javascript:

Ver originalfor(var i = 1; i <= 4; i++) {
    (function(index) {
        setTimeout(function() { slide(index); }, 1000);
    })(i);
}

Cómo puedo retrasar la ejecución??

Bluesman74cl · #3 (**permalink**) 11/02/2015, 13:23

Finalmente el código me quedó como sigue.. Ahora voy a tratar de dejarlo con más iteraciones o infinito XD

Código HTML:

Ver original<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<style>
#heading1, #heading2, #heading3, #heading4{
    position: absolute;
    left: -100px;
    top:20%;
    }
#bajada1, #bajada2, #bajada3, #bajada4{
    position: absolute;
    left: -1500px;
    top:25%;
    }   
</style>
 
<script type="text/javascript">
$(document).ready(function() {
 
for(var i = 1; i <= 4; i++) {
    (function(index) {
        setTimeout(function() { slide(index); }, 5000*index);
    })(i);
}
/*
    loops=10000;
    indice=1;
    for(loops=0;loops<=10;loops++){
        setTimeout(function() {
            slide(indice);          
        }, 1000);
    }*/
});
 
 
    
    function slide(indice){
         $('#heading'+indice).css({opacity: 0}).animate({opacity: 1.0,left: "20%"}, 1000).delay(3000);
         $('#bajada'+indice).css({opacity: 0}).animate({opacity: 1.0,left: "22%"}, 1000).delay(3000);
         $('#heading'+indice).css({opacity: 0}).animate({opacity: 0,left: "-500px"}, 1000);
         $('#bajada'+indice).css({opacity: 0}).animate({opacity: 0,left: "-500px"}, 1000);  
    }
</script>
</head>
 
<body>
<span id="heading1">00000</span>
<span id="heading2">111111</span>
<span id="heading3">222222</span>
<span id="heading4">333333</span>
<span id="bajada1">00000</span>
<span id="bajada2">111111</span>
<span id="bajada3">222222</span>
<span id="bajada4">333333</span>
</body>
</html>

GeekGirl · #4 (**permalink**) 12/02/2015, 12:29

Acordate de marcar el tema como solucionado si ya lo resolviste. Saludos.

Bluesman74cl · #5 (**permalink**) 13/02/2015, 05:41

Quise hacerlo pero creo que lo hice en el segundo post y ahora no puedo editar el post inicial para dejarlo con la etiqueta.
Si alguien me ayuda, grax.

GeekGirl · #6 (**permalink**) 17/02/2015, 13:00

Abajo de todo te tiene que salir un botón verde que dice "Marcar el tema como solucionado"