[Resolvido] Usando setTimeout e setInterval

[marcelo2605 10]

Preciso que um script comece a ser executado 500ms depois da página ser carregada e se repita a cada 5000ms, que é o tempo da animação. Então fiz o seguinte:

 

function ligar() {
   setTimeout(function() {
       $('.parte1').fadeIn(300, function() {
           $('.parte2').fadeIn(300, function() {
               $('.parte3').fadeIn(300, function() {
                   $('.parte4').fadeIn(300, function() {
                       $('.parte5').fadeIn(300, function() {
                           $('.parte6').fadeIn(300, function() {
                               $('.parte7').fadeIn(300, function() {
                                   $('.parte8').fadeIn(300, function() {
                                       $('.parte8').delay(500).fadeOut(300, function() {
                                           $('.parte7').fadeOut(300, function() {
                                               $('.parte6').fadeOut(300, function() {
                                                   $('.parte5').fadeOut(300, function() {
                                                       $('.parte4').fadeOut(300, function() {
                                                           $('.parte3').fadeOut(300, function() {
                                                               $('.parte2').fadeOut(300);
                                                           });
                                                       });
                                                   });
                                               });
                                           });
                                       });
                                   });
                               });
                           });
                       });
                   });
               });
           });
       });
   }, 500);
}


setInterval(ligar(), 5000);​

 

Mas a animação não se repete.

[William Bruno 1501]

sem o ():

 

setInterval(ligar, 5000);​

e esquece o setTimeout

 

 

 

e tipo.. tá bem feio esse monte de função encaixada.

 

Dá uma estudada.. existe como melhorar muito isso ai.

[marcelo2605 10]

William, sem os () o script não roda:

 

Uncaught SyntaxError: Unexpected token ILLEGAL

[William Bruno 1501]

troca:

 

function ligar() {

para:

 

var ligar = function() {

e remova o setTimeout de lá.

[marcelo2605 10]

Nada ainda:

 

var ligar = function() {
       $('.parte1').fadeIn(300, function() {
           $('.parte2').fadeIn(300, function() {
               $('.parte3').fadeIn(300, function() {
                   $('.parte4').fadeIn(300, function() {
                       $('.parte5').fadeIn(300, function() {
                           $('.parte6').fadeIn(300, function() {
                               $('.parte7').fadeIn(300, function() {
                                   $('.parte8').fadeIn(300, function() {
                                       $('.parte8').delay(500).fadeOut(300, function() {
                                           $('.parte7').fadeOut(300, function() {
                                               $('.parte6').fadeOut(300, function() {
                                                   $('.parte5').fadeOut(300, function() {
                                                       $('.parte4').fadeOut(300, function() {
                                                           $('.parte3').fadeOut(300, function() {
                                                               $('.parte2').fadeOut(300);
                                                           });
                                                       });
                                                   });
                                               });
                                           });
                                       });
                                   });
                               });
                           });
                       });
                   });
               });
           });
       });
}


setInterval(ligar, 5000);​

[William Bruno 1501]

ok, e qual o erro ?

 

oq aparece no console ?

[marcelo2605 10]

Uncaught SyntaxError: Unexpected token ILLEGAL

[William Bruno 1501]

ok, em qual linha ?

 

poste o link, fica um pouco mais fácil.

[marcelo2605 10]

William, agora funcionou:

 

http://jsfiddle.net/marcelo2605/9Pkf8/

 

Mas eu gostaria que a animação fosse iniciada quando a página fosse carregada, e não esperasse o tempo do setInterval. É possível?

[William Bruno 1501]

basta chamar uê:

 

ligar();
setInterval(ligar, 5000);

​

[marcelo2605 10]

Resolvido! Obrigado.

[JCMais 75]

e tipo.. tá bem feio esse monte de função encaixada.

 

Dá uma estudada.. existe como melhorar muito isso ai.

 

Concordo com o Bruno. Tá usando muito callback. Além de está fazendo quase que o trabalho "manualmente".

 

Eu estava aqui entendiado e resolvi dar uma pequena melhorada para você ver, ainda tem bastante o que melhorar, mas isso deixo com você:

(function( $ ) {

   var $wrapper = $( '#wrapper' ),
       $items   = $wrapper.find( 'div.item' ),
       $itemsR  = $( $items.get().reverse() ), //Mesma coisa que $items, porém com os elementos em ordem reversa
       itemsLen = $items.length,
       delay = 5000;

   var animate = function( $items, speed ) {

       $items.each( function( idx ) {

           //como o primeiro item possui index 0, não haverá delay, para os demais o delay será proporcional
           $( this ).delay( speed * idx ).fadeIn( speed, function(){

               //Caso for o último item
               if( idx === itemsLen - 1 ) {

                   //refaz a animação de traz para frente, note que estou usando o $itemsR
                   $itemsR.delay( speed ).each( function( idx ){

                       var $this = $( this ).delay( speed * idx );

                       //Caso não seja o último item (que nesse caso seria o primeiro item, ordem reversa lembre-se)
                       if( !( idx === itemsLen - 1 ) ) {
                           $this.fadeOut( speed );
                       } else {
                            //Se for o último item ( no caso o primeiro ), reinicia toda a animação
                           $this.fadeIn( speed, function() {
                               animate( $items, speed );
                           });
                       }
                   });
               }

           });

       });




   };

   setTimeout( function(){ animate( $items, 300 ); }, delay );

}( jQuery ));

 

HTML:

<div id="wrapper">
   <div class="item">Parte #1</div>
   <div class="item">Parte #2</div>
   <div class="item">Parte #3</div>
   <div class="item">Parte #4</div>
   <div class="item">Parte #5</div>
   <div class="item">Parte #6</div>
   <div class="item">Parte #7</div>
   <div class="item">Parte #8</div>
</div>

 

A quantidade de elementos não importa, basta ter a classe item.

 

Online: http://jsfiddle.net/JCMais/d9kjU/

 

Aqui a forma que você está usando: http://jsfiddle.net/JCMais/mdYmA/

 

;)/>/>