JQueryの.animate（）を使用してある値から開始し、別の値で終了

Question

jqueryの.animate（）メソッドを使用して、（明示的に設定された）初期値から最終値にプロパティをアニメーション化することは可能ですか？現在の値から別の値へ？

Answer 1

私が知る限り、それは最終的な価値に現在の値でなければなりません。しかし、高さを20から100ピクセルにアニメーション化したいとしましょう。ちょうど：

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

Answer 2

animate（）を呼び出す前にプロパティの値を設定するだけです。

Answer 3

.animate()は、アニメーション化しているプロパティの現在設定されている値から、メソッドで指定した最終値に常に移動します。不透明度0.75から0.25に変更したい場合は、現在の値が0.5だった場合.css('opacity',0.75).animate({opacity: 0.25})

Answer 4

開始値を擬似セレクタとして設定するだけで簡単に指定できます。

のは、あなたがあなたのコードがなります。この場合、-100〜100のCSSプロパティではありませんいくつかの値をアニメーション化する必要があることを考えてみましょう：

$({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で作業例を見ることができます。