使用 JQuery .animate() 从一个值开始并在另一个值结束

Posted 2023-05-08

【中文标题】使用 JQuery .animate() 从一个值开始并在另一个值结束

【英文标题】：Using JQuery .animate() to start at one value and end at another

【发布时间】：2011-05-11 19:40:59

【问题描述】：

是否可以使用 jquery 的 .animate() 方法将属性从（显式设置的）初始值设置为最终值，还是必须始终从当前值设置为另一个值？

【问题讨论】：

我不太明白你的问题。 .animate()，当前值和初始值有什么区别？更多细节会很好，以及一些代码示例来说明您正在尝试做什么。 :)

你不能在使用.animate()之前设置你的初始值吗？

@elusive- 是的，只是想知道是否有一种更有效的方法可以通过 .animate() 调用来完成这一切，而不必每次都重新定位，然后制作动画

【参考方案1】：

据我所知，它必须是当前值到最终值。但是假设您想要将高度从 20 设置为 100 像素；做吧：

$('#elem').css('height', '20px').animate( height: 100 , 1000);

【参考方案2】：

您可以通过将其设置为伪选择器来简单地指定起始值。

让我们考虑一下，您需要将一些不是 CSS 属性的值设置为从 -100 到 100 的动画。在这种情况下，您的代码将是：

$(xyz: -100).animate(xyz:100, duration:5000, complete:function()
    console.log("done");
, step: function(now) 
    //here you want to place your processing code for every frame of animation.
    console.log("Anim now: "+now);
);

您可以在 JSFiddle here 上查看工作示例。

【参考方案3】：

.animate() 将始终从您正在制作动画的属性的当前设置值变为您使用该方法指定的最终值。如果您想从不透明度 0.75 变为 0.25，并且当前值为 0.5，那么您需要执行 .css('opacity',0.75).animate(opacity: 0.25)

【参考方案4】：

只需在调用 animate() 之前设置属性的值即可。