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

我用jQuery滑动了我网站页面的内容：

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

这样可以正常工作，除了单个页面的速度明显不同，因为有些页面包含的内容非常少（因此#main高度约为500px），而其他页面的内容很多（相应地， #main main的高度可能是10000px） ）。

因此，当500px在500毫秒内向上滑动时，它似乎平滑且缓慢，但在相同的500毫秒内向上滑动10000px就像超音速。

我认为解决方案应该是使用括号中的speed参数变量来反映#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）（因为你说500xx的500ms看起来很好）
3. 乘以500（ms）

当然你可以用参数玩arrount 🙂

Answer 3

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

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

玩一个演示