Несколько анимаций jquery с одинаковой скоростью и разной высотой завершают анимацию одновременно

Question

Итак, у меня есть несколько jquery animate с одинаковой скоростью и разной высотой, и все анимации выполняются одновременно.

Я бы хотел знать, есть ли способ сохранить оригиналСкорость анимации независимо от того, какое расстояние?

http://jsfiddle.net/lollero/CEksN/ - Это означает, что они, конечно, будут выполняться в разное время.

(Моя проблема не в том, как все они завершаютв то же время, но как меняются их скорости)

---

Ответ FlabbyRabbit привел меня на правильный путь.Это более или менее то, что я был после

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

Answer 1

Вот как я бы это сделал:

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

Answer 2

Вот модифицированная версия, где я сделал простое изменение высоты и скорости, чтобы соотношение между ними было более очевидным ...

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

Я также сделал анимацию линейной, чтобы вы могли видеть, что они анимируются с одинаковой скоростью. Удалите «линейный» параметр, и это не так даже выглядит. Я боюсь, что это просто природа ослабления. Выглядит прекрасно, но это может стать причиной математической проблемы, когда речь идет о синхронизации вещей, как вы хотите.

Надеюсь, это поможет:)