可以jQuery's.animate(）方法可以影响变量，而不是CSS属性

Can jQuery's .animate() method be made to affect variables, rather than CSS properties?

本文关键字：变量 影响 属性 CSS 方法 jQuery animate 可以      更新时间：2023-09-26

我开始编写一些JS代码，以某种形式的"轻松"使变量值随着时间的推移而增加，达到目标值。

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

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

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

$({ 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);
}});

要查看他们的行动，请单击此处

相关文章：