chaining fadeIn, fadeOut, animate, wrong execution order

Question

I am trying to programmatically change some text, adding a class, animating it. So far I have this code:

.red {
  font-size: 150%;
  color: red;
}

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

$('#test').fadeOut(500, function() {
  const $this = $(this);
  $this.text('11111111111111111111')
      .fadeIn(500)
      .fadeOut(500, () => $this.text('2222222222222222')
          .css("color", "green"))
          .addClass("red")
          .fadeIn(500)
          .animate({'margin-left': '250px'}, {duration: 3000, complete: function(){
                                    $this.fadeOut(200)
                                }
                              })
});

Unfortunately, the order seems to be messed up. The class "red" is added to the text "1111111....." instead to the text "222222...." and I don't understand why.

Here the jsFiddle: http://jsfiddle.net/3nus4wpy/2/

Answer 1

You have to put everything asynchronous (except further fades) that you want to happen on fade inside the fade callback:

 $('#test').fadeOut(500, function() { const $this = $(this); $this.text('11111111111111111111') .fadeIn(500) .fadeOut(500, () => { $this.text('2222222222222222'); $this .css("color", "green") .addClass("red") }) .fadeIn(500, () => { $this.animate({ 'margin-left': '250px' }, { duration: 3000, complete: function() { $this.fadeOut(200) } }); }); }); 

 .red { font-size: 150%; color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <font id="test" size="7">0000000000000000</font> 

You can also call delay to create a delay before the next chained function runs, eg:

 $('#test').fadeOut(500, function() { const $this = $(this); $this.text('11111111111111111111') .fadeIn(500) .fadeOut(500, () => { $this.text('2222222222222222'); $this.css("color", "green").addClass("red") }) .fadeIn(500) .delay(500) .animate({ 'margin-left': '250px' }, { duration: 3000 }) .delay(3000) .fadeOut(5500) }); 

 .red { font-size: 150%; color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <font id="test" size="7">0000000000000000</font>