javascript - 使用 jQuery 动画缓入

Question

简单的问题，但我找不到解决方法。我有一个将页面滚动到元素的 jQuery 动画:

$('html, body').animate({scrollTop: $("#element").offset().top},1000);

我希望动画有一个缓慢的开始和一个快速的结束(在 css 中缓入)。它应该像这样工作:

$('html, body').animate({scrollTop: $("#maine").offset().top},1000, "ease-in");

有什么办法吗？

Answer 1

在纯 jQuery 中只有两个缓动函数可用:linear 和 swing。

单击黑框以查看它如何与 swing 一起使用:https://jsfiddle.net/o95dq69m/

$(this).animate({'top': topVal}, 500, 'swing', function(){});

如果您不害怕使用额外的库，请继续尝试 jQuery-UI，那里有大量可用的缓动函数，例如 easeInExp: https://jsfiddle.net/o95dq69m/1/

$(this).animate({'top': topVal}, 500, 'easeInExpo', function(){});