jquery - 根据元素的高度更改动画的速度

Question

我正在使用 jQuery 向上滑动网站页面的内容:

$('#main').slideUp(500);

这工作正常，除了个别页面的速度有明显差异，因为有些页面包含很少的内容(因此 #main 的高度约为 500 像素)，而其他页面则包含大量内容(并且相应地，#main 的高度可以是 10000px)。

所以当 500 毫秒内向上滑动 500 像素时，看起来很平滑且缓慢，但在同样的 500 毫秒内向上滑动 10000 像素就像超音速一样。

我认为解决方案应该在括号中使用一个变量作为速度参数，该变量将反射(reflect) #main 高度的一定百分比。

如何做到这一点？

Answer 1

正如其他人所说，我会使用一种算法来获取时间。但我也会有一个时间限制，因为你可能不希望 100000 px 需要 10 秒才能滑动，或者 200px 需要 200 毫秒。

这是我的解决方案:

var height = $('#main').height(),
    msPerHeight = 1, //How much ms per height
    minRange = 500, //minimal animation time
    maxRange = 1500, //Maximal animation time
    time = height * msPerHeight

time = Math.min(time, maxRange);
time = Math.max(time, minRange);

$('#main').slideUp(time)