线性动画成可变宽度

Question

我有一个列表（<ul> 标签），其中子元素（<li> 标签）具有可变宽度，并且向左浮动......

我想将marginLeft 动画到特定点

动画希望有恒定的速度，对于任何宽度..

首先，我用下面的代码捕捉到ul的长度

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

现在我怎样才能修改上面的代码，让任何宽度都拥有 constant_speed？

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

Answer 1

为了保持恒定的速度，您需要计算要行驶的距离，然后以此（和给定的速度）计算达到该速度所需的时间。

例如，如果您想要 10 像素/秒的速度，并且您有 50 像素的覆盖范围（计算得出），则您需要为动画设置 5 秒的长度。