How to show elements in sequence?

Asked

Viewed 216 times

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 making it with this line of code:

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

That’s how it works, but it shows everyone:

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

2 answers

5

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

  • 1

    It is also a method of doing... but the intervals are not fixed.. in this case will be of 0,500,1000,1500,2000. But look...I respected you just for your "nick"... best band on the planet. +1

  • @Marllonnasser are actually fixed. The interval between the animations will always be interval / 2. In the example the interval will always be 500 milliseconds. I know that the space is not for off-topic, but I have to agree. There’s gonna be a better band than this. ,,/

  • The "i" is incremented, right? So in the first interaction is 0*(1000/2)=0. In the second interaction is 1*(1000/2)=500. In the third 2*(1000/2)=1000. And so on... but it’s a solution too! As you said there is nothing in the question requesting that the interval be fixed... so I gave +1. \m/

  • @Marllonnasser worth noting here is that the delay does not delay the execution of each. This means that delays are practically concurrent, so we can predict the interval between the beginning of one animation to the beginning of another with: intervalo atual - intervalo anterior. Just when the second animation starts you will have passed 500 - 0 milliseconds from the beginning of the first. From the third animation to the second: 1000 - 500. Fourth to Third: 1500 - 1000... this also applies in your reply, which has the fixed interval of 1000, since the setTimeout does not delay the execution of each.

5

Just isolate in a method only to display 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>
<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>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.