链接淡入，淡出，动画，错误的执行顺序 [英] 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;
}

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

不幸的是，订单似乎混乱了.类"red"被添加到文本"1111111 ....."而不是文本"222222 ...."，我不明白为什么.

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.

这里是jsFiddle: http://jsfiddle.net/3nus4wpy/2/

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

推荐答案

您必须将要发生的一切异步(除了进一步的淡入淡出)置于淡入淡出回调内部:

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>

您还可以调用delay在下一个链接函数运行之前创建延迟，例如:

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>

这篇关于链接淡入，淡出，动画，错误的执行顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！