2012-01-06 13 views
2

したがって、同じスピードと異なる高さのアニメーションを複数作成でき、すべてのアニメーションが同時に完了します。同じスピードと異なる高さを持つ複数のjqueryアニメーションが同時にアニメーションを完了します

距離に関係なく元のアニメーションの速度を維持する方法があるかどうかを知りたいですか?

http://jsfiddle.net/lollero/CEksN/ - これらはもちろん、異なる時期に完了することを意味します。


FlabbyRabbitの答えは正しい道に私を得た

は(私の問題は、実際には、同時にどのようにすべてが完了していないが、どのようにその速度は異なります)。これは、ここでは、2つの間の比率がより明確になるように、私は高さとスピードに簡単な変更を加えた変更されたバージョンが、だ私は

http://jsfiddle.net/lollero/CEksN/12/

+0

可能な重複:http://stackoverflow.com/questions/ 3191358/jquery-animation-speed – hleinone

答えて

4

をここで

希望は、私はそれについて移動する方法を次のとおりです。

//Calculate length of time per pixel 
var spp = 500/20; 
$('#lt').animate({ height: '400' }, spp*400, 'linear'); 
$('#mm').animate({ height: '55' }, spp*51, 'linear'); 
$('#ss').animate({ height: '20' }, spp*20, 'linear'); 

あなたの更新jsfiddle:http://jsfiddle.net/CEksN/8/

+0

私は後で、特にこの例のすべての側面について考えなかったかもしれないことに気づきましたが、あなたの答えは私がそれと一緒に行きたいところになります。これは私が後にしたものです。 http://www.jsfiddle.net/lollero/CEksN/12 – Joonas

+0

これはもう少し役に立つかもしれません:http://jsfiddle.net/CEksN/13/。持続時間とは最小の要素を表示する時間の長さを指しますが、それを最も高いものに変更するのは簡単です。 – FlabbyRabbit

+0

ありがとう!それは便利になるかもしれない。 – Joonas

0

後にあったものを、多かれ少なかれです...

$('#lt').animate({ height: '400' }, 1600, "linear"); 
$('#mm').animate({ height: '200' }, 800, "linear"); 
$('#ss').animate({ height: '100' }, 400, "linear"); 

アニメーションを線形にして、同じスピードでアニメーション化できることを確認しました。 「線形」パラメータを削除しても、それは見た目ではありません。私はそれが単にイージングの性質だと恐れています。それは素敵に見えますが、あなたが望むようなものを同期させることになると、数学の問題を引き起こす可能性があります。このことができます:)

関連する問題