How to show elements in sequence?

Question

How to show elements in sequence?

Navigation

#1 by (5 votes)
#2 by (5 votes)

2

I'm trying to show the elements in sequence:

<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>

I'm not getting this line of code:

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

This works, but shows everyone:

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

jquery

asked by anonymous 27.01.2017 / 18:44

2 answers

Angular js Array inside another array Changing the order of the Sql columns?

score 5 · Answer 1

Just isolate a method to just show and add a delay between calls.

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><pclass="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>

score 5 · Answer 2

You can use the delay method of the jQuery object to delay execution of the next operation, in this case 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><pclass="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>