使用JQuery .animate（）从一个值开始，到另一个值结束

Question

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

Answer 1

据我所知，它必须是最终价值的当前价值。但是让我们假设你要设置从20到100px的高度;只是做：

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

Answer 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看到工作示例。

Answer 3

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

Answer 4

在调用animate（）之前设置属性的值。