Using JQuery .animate() to start at one value and end at another

Question

Is it possible to use jquery's .animate() method to animate properties from an (explicitly set) initial value to a final value, or must it always be from the current value to another value?

Answer 1

You can simply specify start value by setting it as a pseudo-selector.

Let's consider that you need to animate some value that is not a CSS property from -100 to 100. In this case your code will be:

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

You can see working example at JSFiddle here.

Answer 2

As far as I know it has to be current value to final value. But lets say you want to animate height from 20 to 100px; Just do:

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