0

Estou com um desafio do qual preciso que as DIVs apareçam em sequencia, uma apos a outra.

Para isso, criei um loop com que executa as funções de FadeIn() e FadeOut() para cada elemento DIV do meu HTML.

Porém, pelo que percebi, o loop esta executando tudo de uma unica vez, sem ter um intervalo entre a aparição de uma div e outra. Tentei utilizar funções como setInteval() e sleep(), porém não obtive sucesso.

Segue codigo

            $(document).ready(function() {
                var tempo = 2000;
                var quant = $("#conteudos").children().length;
                var res = tempo * quant;
            
                carregar();
                
                function carregar(){
                    var i = [1,2,3,4,5];
                    var quanti = i.length;
                    
                     for(j=0;j<quanti;j++){
                        var divagora = i[j];    
                        $("#div"+divagora).fadeIn();
                        $("#div"+divagora).fadeOut(3000);
                    
                     }
                
                }

        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
    <head>

        
    </head>
<body>
    <div id="conteudos">
        <div id="div1" style="position:absolute; display: none; width: 100px; height: 100px; background-color: red"></div>
        <div id="div2" style="position:absolute; display: none; width: 100px; height: 100px; background-color: blue"></div>
         <div id="div3" style="position:absolute; display: none; width: 100px; height: 100px; background-color: black"></div>
        <div id="div4" style="position:absolute; display: none; width: 100px; height: 100px; background-color: yellow"></div>
        <div id="div5" style="position:absolute; display: none; width: 100px; height: 100px; background-color: purple"></div>
    </div>
</body>
</html>

Alguém teria alguma proposta para esse caso ?

Obrigado!

2
  • Tem que ser com JS, isso parece bem simples de fazer com CSS...
    – hugocsl
    Commented 10/07/2020 às 20:56
  • @hugocsl é necessário o uso do JS pois no Array determinarei quais Divs irão participar do loop.
    – Vinicius
    Commented 10/07/2020 às 20:58

2 Respostas 2

1
$(document).ready(function() {
  
  carregar();

  function carregar(){
    
    var quant = $("#conteudos").children().length;
      
    var contador = 1;

    setInterval(function(){

      $("#div"+contador).fadeIn();
      $("#div"+contador).fadeOut(3000);

      contador == quant ? contador = 1 : contador++;

    }, 3000);

  }

});

1
  • Ótima solução!!
    – LeAndrade
    Commented 11/07/2020 às 19:49
0

Não precisa utilizar JS para este tipo de animação, como pode ver no exemplo abaixo você pode aplicar dinamicamente ou hard-coded o delay para cada item, utilizando o atributo animation-delay. Este atributo inicializa a animação de acordo com a quantidade de tempo definida.

Chamamos este tipo de animação de Hierarchical Animation.

.box {
    background: #002321;
    margin: 5px;
    height: 100px;
    width: 100px;
    float: left;
    transition: .35s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    opacity: 0;
}

.box-container {
    max-width: 500px;
    overflow: hidden;
    border: 1px solid #000; 
}

.box-container:hover .box {
   opacity: 1;
}

.box-container .box:nth-child(2) {transition-delay: .1s}
.box-container .box:nth-child(3) {transition-delay: .2s}
.box-container .box:nth-child(4) {transition-delay: .3s}
.box-container .box:nth-child(5) {transition-delay: .15s}
.box-container .box:nth-child(6) {transition-delay: .25s}
.box-container .box:nth-child(7) {transition-delay: .35s}
.box-container .box:nth-child(8) {transition-delay: .4s}
<div class="box-container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</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 .