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

Kind of custom animation - delay doesn't work

本文关键字：动画 延迟 不起作用 自定义 一种      更新时间：2023-09-26

这是自定义动画尝试，适用于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;
}

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

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

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

附言我不需要插件建议 - 我想用我自己的代码来做。谢谢。

您将所有回调设置为同时运行（从现在起 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;
}
相关文章：