2

Estou tentando mostrar os elementos em sequência:

<p class="desc">1)INFORMACAO1?</p>
<p class="desc">2) INFORMACAO2</p>
<p class="desc">3)INFORMACAO3</p>
<p class="desc">4) INFORMACAO4</p>
<p class="desc">5) INFORMACAO5</p>

Não estou conseguindo com essa linha de código:

$(this).next('.desc').fadeIn('slow');

Assim funciona, porém mostra todos:

$('.desc').fadeIn('slow');

2 Respostas 2

5

Basta isolar em um método somente para fazer a exibição e adicionar um delay entre as chamadas.

var tempoDeEspera = 1000; //milisegundos

$(".desc").each(function() {
  var elemento = $(this);
  setTimeout(function() {
    exibirElemento(elemento);
  }, tempoDeEspera)
  tempoDeEspera += 1000;
});

function exibirElemento(elemento) {
  $(elemento).fadeIn("slow");
}
.desc {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="desc">1)INFORMACAO1?</p>
<p class="desc">2) INFORMACAO2</p>
<p class="desc">3)INFORMACAO3</p>
<p class="desc">4) INFORMACAO4</p>
<p class="desc">5) INFORMACAO5</p>

5

Você pode utilizar o método delay do objeto jQuery para atrasar a execução da operação seguinte, no caso o fadeIn:

// aumente ou diminua este valor para alterar o intervalo entre as animações.
var interval = 1000;

$('.desc').each(function(i) {
  $(this).delay(i * (interval / 2)).fadeIn('slow');
});
.desc {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="desc">1)INFORMACAO1?</p>
<p class="desc">2) INFORMACAO2</p>
<p class="desc">3)INFORMACAO3</p>
<p class="desc">4) INFORMACAO4</p>
<p class="desc">5) INFORMACAO5</p>

4
  • 1
    Também é um método de fazer... mas os intervalos não são fixos.. neste caso vai ser de 0,500,1000,1500,2000. Mas olha...te respeitei só pelo seu "nick"... melhor banda do planeta. +1 Commented 27/01/2017 às 19:45
  • @MarllonNasser na verdade são fixos. O intervalo entre as animações sempre vai ser interval / 2. No exemplo o intervalo vai ser sempre de 500 milissegundos. Sei que o espaço não é pra off-topic, mas tenho que concordar. Tá pra nascer uma banda melhor que essa. \,,/
    – rdleal
    Commented 27/01/2017 às 22:49
  • O "i" é incrementado, certo? Então na primeira interação é 0*(1000/2)=0. Na segunda interação é 1*(1000/2)=500. Na terceira 2*(1000/2)=1000. E assim por diante... mas é uma solução também! Como você falou não tem nada na pergunta solicitando que o intervalo seja fixo... por isso dei +1. \m/ Commented 28/01/2017 às 4:12
  • @MarllonNasser vale notar aqui é que o delay não atrasa a execução do each. Isso quer dizer que os delays são praticamente concorrentes, então podemos prever o intervalo entre o início de uma animação para o início de outra com: intervalo atual - intervalo anterior. Logo quando a segunda animação começar terão se passado 500 - 0 milissegundos desde o início da primeira. Da terceira animação para segunda: 1000 - 500. Quarta para Terceira: 1500 - 1000... isso se aplica também na sua resposta, que tem o intervalo fixo de 1000, já que o setTimeout não atrasa a execução do each.
    – rdleal
    Commented 28/01/2017 às 15:48

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 .