Question

我有三个包含ID #square，#squarebis和#squaretris的div框，我希望他们使用jQuery颜色动画将背景颜色更改为“绿色”。

我希望动画是连续的：#square首先变为绿色，然后变为#squarebis，然后变为#squaretris。

我正在尝试使用Javascript Promises和.then链接完成此操作。这是我的代码：

//first define the function to wrap the animations into Promises
function animateBox(id) {
    return new Promise(function (resolve, reject) {
        $(id).animate({
                backgroundColor: "green"
            }, 1000, function () {
                resolve()
            });
    })
}

animateBox("#square")
    .then(function () {
        animateBox("#squarebis")
    })
    .then(function () {
        animateBox("#squaretris")
    });

我们的想法是将每个动画包装成一个承诺，并使用animate回调来解决承诺，然后转到链中的下一个动画。

这适用于#squarebis：它等待#square在开始自己的动画之前完成了动画。但是，它不适用于#squaretris，即#squarebis和#squaretris的动画同时启动。

链条工作的第一步使我认为我接近解决方案的事实，但我真的不明白为什么链接的第二步不起作用

Answer 1

好的，我想我自己找到了解决方案。在链中，我直接调用了动画。将代码中的最后一行替换为：

animateBox("#square").then(function(){return animateBox("#squarebis")}).then(function(){
return animateBox("#squaretris")});

动画按预期工作

JQuery使用promises无法按预期工作

1 个答案: