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

我使用jQuery将网站页面的内容向上滑动：

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

这可以正常工作，除了个别页面的速度有明显差异外，因为有些页面包含的内容很少（因此

#main

的高度约为500px），而其他页面的内容很多（相应地，

#main

的高度可能为10000px）

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

我认为解决方案应该是在括号中为速度参数使用一个变量，该变量将反映

#main

高度的一定百分比

---

如何做到这一点

您可以使用jQuerys

$（'#main'）.height（）

来实现：

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

获取#main的高度

除以500（px）（因为你说的500毫秒在500 px时看起来很好）

乘以500（毫秒）

---

当然，您可能会使用以下参数玩Arront:）

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

---

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

---

height（）返回一个整数，无需解析它，除非您删除了.height（？），然后又删除了height/500*500==height？我的猫这样做了，是的，这取决于它指定的500px和500ms-我知道这有点混乱，等等，所以可能正确的方法就是滑动（1/height）？我的逻辑开始冒出浓浓的黑烟。你试过这个吗？你可能会决定，例如，快速启动和平稳着陆对你来说都是可以的。他们都可以，谢谢，但这不是我要问的，沃尔特。好主意，@Karl André，我喜欢maxRange和minRange的主意！

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