2

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

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

这可以正常工作，除了个别页面的速度存在明显差异，因为有些页面包含的内容非常少（#main高度约为 500 像素），而另一些页面的内容很多（相应地，#main高度可能为 10000 像素）。

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

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

如何才能做到这一点？

4

3 回答 3

4

正如其他人所说，我会使用算法来获取时间。但我也会有时间限制，因为您可能不希望 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)
于 2013-05-31T15:45:39.000 回答
2

您可以为此使用 jQuerys $('#main').height()：

 var height = $('#main').height();
 $('#main').slideUp((height / 500) * 500);
  1. 获取#main的高度
  2. 将其除以 500(px)（因为您在 500px 处所说的 500ms 看起来不错）
  3. 乘以 500（毫秒）

当然你可能会玩弄参数:)

于 2013-05-31T15:25:50.933 回答
1

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

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

玩一个演示

于 2013-05-31T16:53:02.917 回答