将线性动画转换为可变宽度

Question

我有一个列表（

标记），其中子元素（
• 标记）具有可变宽度，并向左浮动......

我想要制作动画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 秒的长度。