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

Question

我的这个动画在 jquery 中工作得很好，只是它很慢。 onclick，它平滑地向下滚动到想要的元素。

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

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

我应该可以 "Download Velocity, include it on your page, and replace all instances of jQuery's $.animate() with $.velocity(). You will immediately see a performance boost across all browsers and devices — especially on mobile."

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

我错过了什么？

Answer 1

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

您只需要在 CSS 样式属性（边距、宽度等）上使用 velocity。为任何 non-css 属性动画保留旧的 animate 代码。

更新（感谢A.Wolff）：

Velocity 确实支持 scrollTop 但他们使用 scroll 命令添加了：

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

根据link@A. Wolff提供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.

做了同样的事情

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

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

Replace jquery's $.animate with $.velocity doesn't work

jquery

jquery-animate

velocity

velocity.js

更新（感谢A.Wolff）：