javascript - 可以使 jQuery 的 .animate() 方法影响变量而不是 CSS 属性吗？

Question

我开始编写一些 JS 代码，通过某种形式的“缓入”使变量值随时间增加，直至达到目标值。

我意识到 jquery 已经在它的 .animate() 方法中做到了这一点。当然，该方法是用于操作 CSS 属性，而不是一般变量。

我的问题是，有没有什么办法可以破解它，使该方法影响一个变量，而不是 CSS 属性？

Answer 1

是的，您可以为变量设置动画。 Demo here

$({ n: 0 }).animate({ n: 10}, {
    duration: 1000,
    step: function(now, fx) {
        $("div").append(now + "<br />");
    }
});

在这个例子中，我在 1 秒内将 n 从 0 设置为 10。 step 函数在动画期间被调用，您可以从那里检索 now 中的当前值。

就个人而言，我使用这种技术以非线性方式同时为多个 css 属性设置动画。

Animate 通过修改 JS 对象中声明的属性值来运行。尽管 animate 旨在更改 CSS 标量值，但它也可以安全地用于任何通用属性，只要 value 是标量即可。
事实上，您可以将 CSS 视为一组 JS 对象，其中的属性例如 top、margin 等。

请注意，以下脚本执行相同的操作。他们将 CSS left 从 0 更改为 10

$("#test").css('left', 0).animate({ left: 10 }, 1000);

与

相同

$({ left: 0 }).animate({ left: 10 }, {duration: 1000, step: function(now, fx) {
  $("#test").css('left', now);
}});

或者，不使用 now 参数

var obj = { left: 0 };
$(obj).animate({ left: 10 }, {duration: 1000, step: function() {
      $("#test").css('left', obj.left);
}});

查看它们的实际应用 click here