How to animate every element in equal speed in jQuery?

Question

I have simple animation.

$(element).animate({
    left: rand_value() + "px"
}, 5000, "linear");

But there is one little-big problem. Animation duration is 5 seconds from point A to point B. But I want to animate every element with equal speed from point A to point B without dependences from time. And I don't know how to do this.

Example:

• ElemA: start point is 0, end point is 1000
• ElemB: srart point is 0, end point is 200

Speed of ElemA and ElemB must be equal, ~ 10px/second. And it means that the animation is different duration.

Answer 1

This might help:

var rand = rand_value();
$(element).animate({
    left: rand + "px"
}, 100*rand, "linear");

Here's why this makes sense: speed = distance/time , so 10px/sec = rand/time and thus 0.01px/millisecond = rand/time such that time = rand/0.01 which is equal to time = rand * 100 . This is consistent with the fact that .animate(...) takes a duration in millisecond units.

Answer 2

Ok, thank you for your idea JCOC611 There is suitable solution, for me

var rand = rand_value();
var multiplier = 3; // multiplier, to decrease animation speed
$(element).animate({
    left:  rand +"px)"
}, rand * multiplier, "linear");

In this way, every animation will be with equal speed, and it speed can be controlled with multiplier.