1

Estou tentando criar uma função de loop que fica alternando entre 2 divs. Mas o resultado é que na hora de recomeçar a função, não consigo fazer ela esperar novamente os 5 segundos de intervalo da alternância, gerando um resultado visual errado.

Segue a função:

$(document).ready(function(){
        ciclos();
        function ciclos(){
            $(".slide:first-child").fadeIn(1000).delay(5000).fadeOut(1000);
            $(".slide:nth-child(2)").delay(6000).fadeIn(1000).delay(5000).fadeOut(1000);
            setTimeout(ciclos, 5000);
        }
    })
4
  • Respondi isto uma vez... Dá uma olhada: pt.stackoverflow.com/questions/192594/…
    – Maurivan
    Commented 9/09/2017 às 1:18
  • O tempo do seu setTimeout está correto? Após 5 segundos ele vai chamar a função ciclos de novo sem se importar com os tempos que vc colocou nos fadeIn, fadeOut e delay. Além do mais, o setTimeout deve ser usado num callback, quando o efeito que vc queria terminou. Ou seja, vc fez uma mistura de temporizadores ai que acho que não vai funcionar.
    – Sam
    Commented 9/09/2017 às 1:23
  • Estes números dele não fecham mesmo!
    – Maurivan
    Commented 9/09/2017 às 1:27
  • Realmente, eu vi que os tempos estavam errado, mas mesmo corrigindo, o tempo depois de alguns ciclos começa a ficar errado. Eu queria que a função ciclos() fosse chamada depois do ultimo fadeOut, como se fosse: $(".slide:nth-child(2)").delay(6000).fadeIn(1000).delay(5000).fadeOut(1000).ciclos();
    – Nicolas S.
    Commented 9/09/2017 às 1:43

1 Resposta 1

5

Se quer que duas animações em elementos diferentes sejam feitas em sequência tem de chamar uma na função de completar da outra.

Se tivermos a animação fadeIn de num <p> e queremos após essa fazer um fadeIn num <h1> teríamos que fazer o fadeIn do <h1> no callback(função que corre quando a animação completa) do fadeIn do <p>, assim:

$("p").fadeIn(1000, function(){ //quando o fadeIn do p termina executa esta função
     $("h1").fadeIn(1000);
});

Transpondo esta logica para o seu exemplo teria que o alterar para que ficasse assim:

function ciclos(){
   $(".slide:first-child").fadeIn(1000).delay(5000).fadeOut(1000, function(){
      //esta segunda animação agora é apenas chamada quando a primeira termina
      $(".slide:nth-child(2)").delay(6000).fadeIn(1000).delay(5000).fadeOut(1000, function(){
          //o timeout é agora só chamado quando a segunda animação termina
          setTimeout(ciclos, 5000);
      });
   });
}

Exemplo a funcionar (reduzi os tempos para ser mais fácil de ver que funciona):

$(document).ready(function(){
        ciclos();
        function ciclos(){
            $(".slide:first-child").fadeIn(1000).delay(2000).fadeOut(1000, function(){
              $(".slide:nth-child(2)").
              delay(1000).fadeIn(1000).delay(3000).fadeOut(1000, function(){
                setTimeout(ciclos, 4000);
              });
            });
            
            
        }
    })
.slide { 
  width:300px;
  height:200px;
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div >
  <img class="slide" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg">
  <img class="slide" src="https://c2.staticflickr.com/4/3899/14383431886_8f0675cf95_b.jpg">
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .