同樣速度和不同高度的多個jquery動畫的同時完成動畫

所以，我有多個jquery動畫的速度和高度不同，並且所有的動畫都是同時完成的。同樣速度和不同高度的多個jquery動畫的同時完成動畫

我想知道是否有辦法保持原來的動畫速度不管距離是多少？

http://jsfiddle.net/lollero/CEksN/ - 這意味着這些當然會在不同的時間完成。

（我的問題是不是真的，他們一切是如何完成在同一時間，但他們的速度如何變化）

FlabbyRabbit的回答讓我在正確的道路。這是多了還是少了什麼我

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

來源

2012-01-06 Joonas

可能重複：http://stackoverflow.com/questions/ 3191358/jquery-animation- – hleinone 2012-01-06 13:52:57

這是我會怎麼做呢：

//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/

來源

2012-01-06 13:54:57 FlabbyRabbit

我後來意識到，我可能沒有想過這個問題的所有方面，特別是對於這個例子，但是你的答案讓我想到了它的位置。這或多或少是我所追求的。 http://www.jsfiddle.net/lollero/CEksN/12 – Joonas 2012-01-06 14:27:42

這可能會更有用：http://jsfiddle.net/CEksN/13/。持續時間是指顯示最小元素的時間長度，但應該很容易將其更改爲最高。 – FlabbyRabbit 2012-01-06 14:29:45

謝謝！這可能會派上用場。 – Joonas 2012-01-06 14:35:40

後，這裏有一個修改版本，其中我做了一個簡單的變化的高度和速度，使兩者之間的比例更明顯...

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

我也製作了線性動畫，以便您可以看到它們以相同的速度進行動畫製作。刪除「線性」參數，它甚至看起來都不那麼明顯。恐怕這只是寬鬆的本質。它看起來很可愛，但當涉及到像你想要的那樣同步時，它可能會導致一個數學問題。

希望這有助於:)

來源

2012-01-06 13:54:19 Archer

同樣速度和不同高度的多個jquery動畫的同時完成動畫

回答

相關問題