一种自定义动画 - 延迟不起作用

Question

这是自定义动画尝试，适用于background-position。

var i = 5;
while(i !== 0) {
  setTimeout(function() {
    $("#feedback-toad").css("height","+=50");
    $("#feedback-toad").css("background-position", "50% "+i*(-20)+"%");
  }, 1000);
  i = i - 1;
}

它在最终结果方面起作用 - 最后元素看起来像我想要的。

但它看起来不像动画，它会立即发生 - 看起来像延迟（超时）不起作用。

为什么呢？我该如何解决这个问题？

P.S。我不需要插件建议 - 我想用我自己的代码来做。感谢。

Answer 1

您要将所有回调设置为同时运行（从现在起1000毫秒）。

应该是这样的，所以它每秒发生1次动画：

var i = 5;
while (i !== 0) {
    setTimeout(function () {
        $("#feedback-toad").css("height", "+=50");
        $("#feedback-toad").css("background-position", "50% " + i * (-20) + "%");
    }, i * 1000);
    i = i - 1;
}