Foros del Web - Ver Mensaje Individual

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>