jquery - 将 jquery 的 $.animate 替换为 $.velocity 不起作用

Question

我的动画在 jquery 中运行得很好，只是它非常延迟。单击时，它会平滑地向下滚动到所需的元素。

$('#aboutMenu').click(function(){
$('html, body').animate({
    scrollTop: $( $(this).attr('href') ).offset().top -200
}, 900);
return false;

根据此网页:http://julian.com/research/velocity/

我应该能够简单地“下载 Velocity，将其包含在您的页面上，然后用 $.velocity() 替换 jQuery 的 $.animate() 的所有实例。您将立即看到所有浏览器和设备的性能提升 —尤其是在移动设备上。”

好吧，我这样做了，但是当我点击时，什么也没有发生。

我错过了什么？

Answer 1

Velocity 仅适用于 CSS 可动画属性，不适用于 scrollTop，它会更改不可 CSS 样式化的元素的属性。

您只需对 CSS 样式属性(边距、宽度等)使用 velocity。对于任何非 CSS 属性动画，保留旧的 animate 代码。

更新(感谢 A.Wolff):

Velocity 确实支持 scrollTop，但使用他们添加的 scroll 命令:

$element.velocity("scroll", { duration: 1500, easing: "spring" })

根据链接@A。沃尔夫提供https://github.com/julianshapiro/velocity/issues/26

We'll start with the basics: Velocity doesn't support animating scrollTop property like $.animate() does. (It's not a real property -- jQuery shimmed it.)

所以 scrollTop 在 animate 中工作的唯一原因是因为他们专门将其添加到 jQuery 中。他们使用 scroll 作为 velocity 做了同样的事情。

附注我们使用速度进行转换，尤其是对于移动设备，它更加平滑。