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

【问题标题】：Change the speed of animation depending on the height of the element根据元素的高度改变动画的速度
【发布时间】：2013-06-01 00:53:02
【问题描述】：

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

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

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

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

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

如何做到这一点？

【问题讨论】：

你试过UI's easing functions吗？例如，您可能会决定快速起步和平稳着陆
他们没问题，谢谢，但这不是我要问的，沃尔特。

标签： jquery

【解决方案1】：

正如其他人所说，我会使用算法来获取时间。但我也会有时间限制，因为您可能不希望 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)

【讨论】：

伟大的想法，@Karl-André，我喜欢 maxRange 和 minRange 的想法！

【解决方案2】：

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

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

获取#main的高度
将其除以 500(px)（因为您所说的 500 毫秒在 500 像素处看起来不错）
乘以 500（毫秒）

当然你可以玩arrount :)

【讨论】：

height() 返回一个整数，不需要解析它
除非您删除了 .height (?)
然后又是高度 / 500 * 500 == 高度？
我的猫这样做了，是的，这取决于他指定的 500px 和 500ms - 我知道这有点令人困惑
等一下，所以也许正确的做法就是上滑（1/高度）？我的逻辑开始冒出浓浓的黑烟。

【解决方案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

【讨论】：