1

Eu tenho o seguinte código que gostava que fizesse fadeIn e fadeOut passados 3 segundos. Pensei em usar setInterval para fazer o loop e depois usar um setTimeout para dar o tempo que cada div estava visível. Existe alguma forma de fazer o que desejo? Tenho algo mal no meu código?

setInterval(function(){
    setTimeout(function(){
        $(".emer3").fadeOut("fast");
        $(".emer1").fadeIn("fast");
    }, 3000);

    setTimeout(function(){
        $(".emer1").fadeOut("fast");
        $(".emer2").fadeIn("fast");
    }, 3000);

    setTimeout(function(){
        $(".emer2").fadeOut("fast");
        $(".emer3").fadeIn("fast");
    }, 3000);
}, 9000);



<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12" style="margin-top:100px;">
  <div class="col-lg-4 col-sm-4 col-xs-4 col-md-4 emer1">
    252 252 252
  </div>
  <div class="col-lg-4 col-sm-4 col-xs-4 col-md-4 emer2" style="display:none">
    252 252 252
  </div>
  <div class="col-lg-4 col-sm-4 col-xs-4 col-md-4 emer3" style="display:none">
    252 252 252
  </div>
</div>

Exemplo neste JSFIDDLE

12
  • Mas qual é o problema com esse código ? Está funcionando, se não for esse o efeito, explica um pouco melhor, ficou meio confuso o que você quer fazer. Commented 19/10/2017 às 10:33
  • @AnthraxisBR jsfiddle.net/nek7xugw/1 Veja aqui o exemplo Commented 19/10/2017 às 10:36
  • Qual é a ideia do setInterval? Queres voltar a esconder depois?
    – Sergio
    Commented 19/10/2017 às 10:37
  • @Sergio O setInterval é suposto funcionar como um lopp infinito mas não está a resultar como esperado Commented 19/10/2017 às 10:38
  • Mas queres mostrar e depois esconder? O setTimeout corre 1 vez, e porque o queres correr de novo?
    – Sergio
    Commented 19/10/2017 às 10:39

1 Resposta 1

1

No seu código o problema é que todos os setTimeout começam ao mesmo tempo, logo as esperas terminam simultâneo.

Quando quer encadear animações em Jquery deve utilizar a função de complete, que é um callback, desta maneira:

$(".umaclass").fadeIn("fast", function(){
    //aqui vem o código a executar quando esta animação acaba
});

Se não o fizer dessa forma então todos os fades para elementos diferentes correm em simultâneo.

Para o seu problema em concreto de animar divs em sequencia sugiro outra abordagem, que até é mais escalavel, construindo um array de divs a animar e animar em sequencia com base na posição em que vai.

Exemplo:

const divs = [$(".emer1"), $(".emer2"),$(".emer3")]; //divs a animar
let i = 0; //div corrente

function animar(){
  divs[i].fadeOut("fast"); //fadeout do corrente
  i = (i+1>=divs.length)?0:i+1; //descobrir o proximo
  divs[i].fadeIn("fast", function(){ //fadein do proximo
    setTimeout(() => { animar() } ,3000); //esperar 3 segundos e repetir o processo
  });
}

setTimeout(()=>animar(), 3000); //iniciar tudo em 3 segundos
.emer1 {
  background-color:cyan;
}

.emer2 {
  background-color:yellow;
}

.emer3 {
  background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12" style="margin-top:100px;">
  <div class="col-lg-4 col-sm-4 col-xs-4 col-md-4 emer1">
    252 252 251
  </div>
  <div class="col-lg-4 col-sm-4 col-xs-4 col-md-4 emer2" style="display:none">
    252 252 252
  </div>
  <div class="col-lg-4 col-sm-4 col-xs-4 col-md-4 emer3" style="display:none">
    252 252 253
  </div>
</div>

Documentação do fadeIn e do fadeOut

Nota: coloquei umas cores nos divs para que o efeito fosse mais evidente.

1
  • Muito Obrigado! Resultou na perfeição Commented 20/10/2017 às 10:10

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 .