使用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(){});