Using jQuery.animate () to start with one value and end with another

Question

Is it possible to use the jquery.animate () method to animate properties from a (explicitly specified) initial value to the final value, or should it always be from the current value to another value?

Answer 1

As far as I know, this should be the current value for the final value. But let's say you want to animate the height from 20 to 100 pixels; Just do:

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

Answer 2

You can simply specify the initial 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 a working example in JSFiddle here .

Answer 3

.animate() will always go from the current set value of the property you are animating to the final value that you specify using the method. If you want to go from opacity 0.75 to 0.25, and your current value was 0.5, you will need to do .css('opacity',0.75).animate({opacity: 0.25})

Answer 4

Just set the property value before calling animate ().