Question

I have a list (<ul> tag) which children elements (<li> tag) has variable width, and floating left….

I want to animate marginLeft to a specific point

The animation would like to have constant speed, for any width..

First of all, I catch the length of the ul with the following code

ul_length=parseFloat($("#developments ul").css("width"))+
          parseFloat($("#developments ul").css("paddingLeft"))+
          parseFloat($("#developments ul").css("paddingRight"));

Now how can i modify the above code to have constant_speed for any width?

$scrollhandler=$("#developments ul").animate({
        marginLeft: -1*(ul_width+li_padding)
        }, {
        duration: ul_length,
        easing: "linear"
    });

Answer 1

In order to have constant speed, you want to calculate the distance you’re going to cover, and then by that, (and the given speed), calculate the time it would take to reach that speed.

For instance, if you’d like a speed of 10px/sec, and you have 50px to cover (calculated), you’ll need to give the animation a 5 second length.