JQuery HTML() не обновляется с правильным текстом

Question

У меня есть Div

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

и этот JQuery код, который не похоже на работу, ДИВ обновляется с последним значением HTML «текст текст B текст B B»даже на первый HTML() вызов

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>

, что я вижу, это "текст B текст B текст B" выцветания, гаснуть, но всегда с тем же текстом, я никогда не видел «Текст Текст Текст A»

из консоли можно увидеть «ОК TXT A», подождите, а затем появится «ОК текстовый B» но отображаемый текст всегда является последним html() text

Answer 1

Я думаю, что задержка не влияет на html(), поэтому, когда очередь эффектов задерживается, текст изменяется немедленно. Вероятно, вы должны использовать полную опцию в анимации(), чтобы изменить текст и сделать следующую анимацию.

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>