根据元素的高度改变动画的速度

Question

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

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

这个工作得很好，除了个别页面的速度有明显的差异，因为一些页面包含很少的内容(所以#main的高度大约是500px)，而其他页面有很多内容(相应地，#main的高度可能是10000px)。

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

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

如何做到这一点?

Answer 1

正如其他人所说，我将使用算法来获取时间。但我也会有一个时间限制，因为你可能不希望100000像素的幻灯片需要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)

Answer 2

您可以使用jQuerys $('#main').height():

 var height = $('#main').height();
 $('#main').slideUp((height / 500) * 500);

1. 获取#main
的高度
2. 将其除以500(px)(因为您说的500ms在500px下看起来很好)
3. 乘以500(ms)

当然你也可以改变参数:)

Answer 3

jQuery根据持续时间计算动画速度-完成动画所需的总时间。这通常很好，但是如果动画以相同的速度(以每秒像素为单位)发生比在相同的时间内发生更重要，则需要对jQuery进行数学运算以将速率转换为时间。还记得小学的那个等式吗?
距离 = 速度×时间(或者,在我们的案例中,时间距离 = ÷)率

var rate = 200; // pixels per second
var height = $("#main").height();
var ms = height / rate * 1000;
$("#main").slideUp(ms);

play with a demo