可以使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