Question

我正在尝试以编程方式更改一些文本，添加一个类，对其进行动画处理。到目前为止，我有以下代码：

.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 ....”，我不明白为什么。

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

Answer 1

您必须在衰落回调中将要发生的所有异步操作（进一步的衰落除外）：

$('#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创建下一个链接函数运行之前的延迟，例如：

$('#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>

链接淡入，淡出，动画，错误的执行顺序

1 个答案: