CODEWITHSUNDEEP
jquery
user838531
user838531

Reputation: 488

change text of same element multiple times

I need to change the text of an element multiple times, with delays in between the text changes.

I tried this but the text "1111..." and "22222..." is never displayed. It jumps right to the third text "33333.....".

Code:

<font id="test" size="7">0000000000000000</font>

$(function() {

  $('#test').fadeOut(500, function() {
    $(this).text('11111111111111111111').fadeIn(500)
      .fadeOut(500)
      .text('2222222222222222').fadeIn(500)
      .fadeOut(500)
      .text('3333333333333333333').fadeIn(500);
  });

});

Fiddle: http://jsfiddle.net/evg82drL/

Upvotes: 0

Views: 53

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370699

Call .text() inside the second parameter passed to fadeOut or fadeIn - it takes a callback that runs once the fade is completed:

$('#test').fadeOut(500, function() {
  const $this = $(this);
  $this.text('11111111111111111111').fadeIn(500)
    .fadeOut(500, () => $this.text('2222222222222222'))
    .fadeIn(500)
    .fadeOut(500, () => $this.text('3333333333333333333'))
    .fadeIn(500);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<font id="test" size="7">0000000000000000</font>

Upvotes: 4

Related Questions