CODEWITHSUNDEEP
jquerywidthjquery-animate
Chris P
Chris P

Reputation: 2355

linear animate into variable width

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"
    });

Upvotes: 0

Views: 1145

Answers (1)

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175098

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.

Upvotes: 1

Related Questions