Question

我需要多次更改元素的文本，在文本更改之间会有延迟。

我尝试了此操作，但从未显示文本“ 1111 ...”和“ 22222 ...”。它会跳到第三个文本“ 33333 .....”。

代码：

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

});

提琴：http://jsfiddle.net/evg82drL/

Answer 1

在传递给.text()或fadeOut的第二个参数中调用fadeIn-淡入完成后需要运行一个回调：

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

多次更改同一元素的文本

1 个答案: