可以使jQuery的.animate()方法影响变量,而不是CSS属性吗？

Question

我开始编写一些JS代码,使变量值随着时间的推移而增加,达到目标值,并采用某种形式的"缓入".

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

我的问题是,是否可以做任何事情来破解它,以便该方法影响变量,而不是CSS属性？

Answer 1

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

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

要查看它们,请单击此处