自定义值的 jQuery 动画（不是 CSS 属性）答案

【问题标题】：jQuery animate of custom value (not a CSS property)自定义值的 jQuery 动画（不是 CSS 属性）
【发布时间】：2011-12-30 13:04:06
【问题描述】：

我想做最奇怪的事情：用 animate 改变值，它不是 css 属性，而只是一个变量。

我需要这个，因为我想在用户点击它的边框时旋转一个元素。所以我需要对角度值进行动画处理，然后在自定义绘图算法中使用它。

我尝试使用隐藏 DIV 的 css 属性来存储它的角度值并为其设置动画，但它无法正常工作。

谁能帮帮我？

【问题讨论】：

根据JQuery animate docapi.jquery.com/animate：“除了样式属性，一些非样式属性如scrollTop和scrollLeft，以及自定义属性，都可以动画化。”

标签： jquery css variables jquery-animate

【解决方案1】：

在搜索同样的东西时偶然发现了这个，正确的答案似乎是

$({foo:0}).animate({foo:100}, {
    step: function(val) {
        // val takes values from 0 to 100 here
    }
})

发现于http://james.padolsey.com/javascript/fun-with-jquerys-animate/

【讨论】：

这就是我要找的。我不想改变任何 DOM 元素的属性、样式或 JavaScript 属性。
注意起始值必须为零。因此，假设结束值为“1”并进行自己的进度计算可能更容易：val = start_val*(1-val) + end_val*val;
@Ch'marr jQuery 现在似乎支持任何初始值。
为什么起始值必须为零？这是荒谬的。此外，将范围从 0 限制到 1 并进行自己的 easing 计算几乎一开始就违背了使用此方法的目的。
你在哪里设置持续时间？

【解决方案2】：

令人讨厌的是，如果没有实际提供一些 CSS 属性供它使用（它不会为您提供介于两者之间的值），就无法运行 animate 函数。

您甚至不需要让动画在您想要更改的实际元素（或变量）上运行，因此可以使用@Andrew 描述的step 参数来破解它，如下所示：

$('<div/>').css({ height: _your_start_value }).animate({
    height: _your_end_value
}, { 
    step: function (currentValue) {
        //do what you need to with the current value..
    }
});

但是，这非常低效，因为它不必要地更改了（尽管未附加）元素的 height CSS 属性。最好只使用诸如Tween JS 之类的“补间”库来做这种事情。

【讨论】：

【解决方案3】：

如果您想“旋转”某些东西，可以do that with css，因此，您可以使用jQuery animate function。

【讨论】：