Question

So, I have multiple jquery animate’s with the same speed and different height’s and all of the animations are completed at the same time.

I’d like to know if there is a way to keep the original animation speed no matter what the distance is?

http://jsfiddle.net/lollero/CEksN/ – Meaning that these would of course complete at different times.

( My problem isn’t really how they all complete at the same time, but how their speeds vary )

---

FlabbyRabbit’s answer got me to the right path. This is more or less what I was after

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

Answer 1

Here is how I would go about it:

//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');

Your updated jsfiddle: http://jsfiddle.net/CEksN/8/