可以使jQuery的.animate（）方法影响变量，而不是CSS属性吗？

我开始编写一些JS代码，使变量值随着时间的推移而增加，达到目标值，并采用某种forms的“缓入”。

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

我的问题是，是否有任何可以破解它的方法，以便该方法影响变量，而不是CSS属性？

Answer 1

是的，您可以为变量设置动画。 在这里演示

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

在这个例子中，我在1秒钟内将n从0到10动画。 在动画期间调用step函数，从那里您可以立即检索当前值。

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

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

请注意，以下脚本执行相同的操作。 他们将CSS从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); }}); 

要查看它们， 请单击此处