Javascript 链式jQuery承诺尽早执行

我正在努力实现jQuery的承诺和动画。这是一个简化的情况：

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

我希望标题（

$（'#intro h2'）

）先淡出，然后淡入，然后背景颜色变为红色。相反，在标题重新淡入之前，背景会变为红色

发生什么事了

---

如何使用承诺来确保事件的正确顺序？

您需要从第一次

然后（）

回调返回淡入动画的承诺

否则，承诺链就没有什么可等待的了，所以它会立即执行

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

---

您的

then

回调不会返回承诺，因此承诺链不知道等待什么。它不等待

未定义的
。使用

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

看起来您应该使用jQuery的
队列来执行此行为，而不是
承诺
。感谢您的回答。我确实知道链接
$foo.fadeOut（t）.fadeIn（t2）但是我的实际用例更复杂，这个例子是我能想到的最简单的例子来展示我所经历的。实际用例涉及创建助手函数，以跨多个动画效果标准化动画行为（计时、放松、返回承诺）。问题发生时没有帮助函数的复杂性，所以我只给出了这个简化的示例。