jQuery html() 没有更新正确的文本

Question

我有一个div

 <div id="box-loading-txt">txt</div>

和这个 jQuery 代码，似乎不起作用， div 即使在第一个 html() 调用

时，也会更新上一个 HTML 值 "text B text B text B"

var t = 200;
var d = 2000;

$('#box-loading-txt').delay(d).animate({
  'opacity': 0
}, t, function() {

  $('#box-loading-txt').html("text A text A text A").promise().done(function() {

    console.log("ok txt A");

    $('#box-loading-txt').animate({
      'opacity': 1
    }, t).delay(d);

    $('#box-loading-txt').animate({
      'opacity': 0
    }, t);
    $('#box-loading-txt').html("text B text B text B").promise().done(function() {
      console.log("ok txt B");
      $('#box-loading-txt').animate({
        'opacity': 1
      }, t).delay(d);
    });

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box-loading-txt">txt</div>

我看到的是 "text B text B text B" 淡入，淡出但始终使用相同的文本，我从来没有看到 "text A text A text A"

从控制台我可以看到 "ok txt A"，等待然后出现 "ok txt B" 但显示的文本始终是最后一个 html() 文本

Answer 1

我认为延迟不会影响 html()，所以在效果队列延迟的同时，文本会立即更改。您可能应该使用 animate() 中的完整选项来更改文本并执行下一个动画

Answer 2

在这种情况下更喜欢使用 triggers。

另外200 delay对于动画来说太小了，我不建议使用小于400-500的延迟

有例子

DEMO LINK

var t = 500;
var d = 2000;
var t1 = "text A text A text A";
var t2 = "text B text B text B";

$('#box-loading-txt').on('tiggerA', function() {

  $('#box-loading-txt').html(t1).promise().done(function() {
      console.log("ok txt A");
    $('#box-loading-txt').animate({
      'opacity': 1
    }, t, function() {
      $('#box-loading-txt').trigger('tiggerB');
    })

  });

})

$('#box-loading-txt').on('tiggerB', function() {
  $('#box-loading-txt').animate({
    'opacity': 0
  }, t, function() {

    $('#box-loading-txt').html(t2).promise().done(function() {
      console.log("ok txt B");
      $('#box-loading-txt').animate({
        'opacity': 1
      }, t).delay(d);
    });
  });

})


$('#box-loading-txt').delay(d).animate({
  'opacity': 0
}, t, function() {
  $('#box-loading-txt').trigger('tiggerA');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box-loading-txt">txt</div>

jQuery html() 没有更新正确的文本

jQuery html() not updating with correct text

jquery

jquery-animate