Chaining Fadein, Fadeout, Animate, Wrong Execution Order

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; } 0

Solution 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;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><fontid="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;
}

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