Question

我有一个div

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

这个jQuery代码似乎不起作用， div用最后的HTML值更新＆＃34;文本B文本B文本B＆＃34;甚至在第一次html（）调用

＆＃13;

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

＆＃13;

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

＆＃13;

我看到的是＆＃34;文字B文字B文字B＆＃34; 淡入，淡出但总是使用相同的文字，我从未见过＆＃34; text文本A＆＃34;

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

Answer 1

我认为延迟不会影响html（），所以当效果队列延迟时，文本会立即更改。您应该使用animate（）中的complete选项来更改文本并执行下一个动画

Answer 2

在这种情况下，A更喜欢使用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（）没有用正确的文本更新

2 个答案: