自定義動畫的種類-延遲不起作用

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;
}

它根據最終結果工作-最終元素看起來像我想要的。

但是它看起來不像動畫，它會立即發生-看起來延遲（超時）不起作用。

為什么？ 我該如何解決？

PS：我不需要插件建議-我想用自己的代碼來完成。 謝謝。

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;
}