Question

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

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

这样做没问题，除了单个页面的速度明显不同，因为有些页面包含非常少的内容（因此#main的高度约为500px），而其他页面包含大量内容（相应地，{{ 1}}可以是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);

获取#main
除以500（px）（因为你说500xx的500ms看起来很好）
乘以500（ms）

当然你可以使用参数来玩arrount：）

Answer 3

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

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

play with a demo

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

3 个答案: