Цепочки jQuery обещают выполнить ранние

Question

Я борюсь с обещаниями и анимациями jQuery. Это упрощенный случай:

var title = $('#intro h2'); 
title.fadeOut(2000).promise() 
    .then(function() { title.fadeIn(4000); }) 
    .then(function() { title.css({'background-color':'red'}); }); 

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

Что происходит?

Как я могу использовать обещания для обеспечения правильной последовательности событий?

Answer 1

Ваш then обратный вызов не возвращает обещание, так что обещание цепи не знает, что ждать. Он не ждет undefined. Используйте

title.fadeOut(2000).promise().then(function(){ 
    return title.fadeIn(4000).promise(); 
// ^^^^^^     ^^^^^^^^^^ 
}).then(function() { 
    title.css({'background-color':'red'}) 
}) 

Обратите внимание, что эта анимация также может быть сделано с помощью очереди анимации в одиночку:

title.fadeOut(2000).fadeIn(4000, function(){title.css('background-color','red')}) 

Answer 2

Вам необходимо вернуть обещание анимации постепенного превращения с вашего первого обратного вызова then().

В противном случае цепочке обещаний нечего ждать, поэтому она выполняется немедленно.

title.fadeOut(2000).promise() 
    .then(function() { return title.fadeIn(4000).promise(); }) 
    .then(function() { title.css({'background-color':'red'}); });