可以让 jQuery 的 .animate() 方法影响变量，而不是 CSS 属性吗？答案

【问题标题】：Can jQuery's .animate() method be made to affect variables, rather than CSS properties?可以让 jQuery 的 .animate() 方法影响变量，而不是 CSS 属性吗？
【发布时间】：2012-02-17 06:50:43
【问题描述】：

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

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

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

【问题讨论】：

你不能直接使用setTimeout() 很容易地达到同样的效果吗？
轻松为变量设置动画？？？这没有任何意义。
您可以使用 CSS 属性作为变量吗？换句话说，不要初始化一个普通的 javascript 变量。相反，制作一个不显示的 div 或类似的东西，并且您的代码需要访问变量的地方，让它访问 div 的 css 属性。
@JohnPick - 是的，我正在考虑这个问题，但它似乎有点 hacky。
@elclanrs - 我从来没有说过'动画变量'。我说的是让 animate() 方法随着时间的推移操纵变量，而不是 css 属性（这只是另一个数字）。

标签： javascript jquery

【解决方案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

【讨论】：

注意命名为某些 CSS 属性的属性，例如 zoom、padding 等。jQuery 尝试操作 CSS 等属性，这显然在非 DOM 对象上失败。一个简单的解决方法是在特殊名称前加上“_”，这样您就可以为 _zoom 设置动画而不是 zoom。
@81403 这不是真的。如果你在一个非 DOM 对象上运行.animate，jQuery 只会看到那个对象并且不会对它应用任何 CSS。 Here 我正在使用 top 属性为 JS 对象设置动画，您可以看到它没有向下移动。
@JoseRuiSantos 您希望 javascript 对象如何向下移动？ :) 无论如何，我并没有说所有的 CSS 属性，只是一些。虽然top 有效，但zoom 无效，这应该更清楚地说明我的意思：jsfiddle.net/Le44kax5
@81403 我的错。是的，你是对的。感谢您指出这个问题。