轻松使用jQuery动画

Question

Simple question, but I can't find a way to do it. I have a jQuery animation that scrolls the page to an element:

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

I want the animation to have a slow start and a fast end (ease-in in css). It should work like this:

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

Is there any way to do this?

Answer 1

There are only two easing functions available in plain jQuery: linear and swing .

Click the black box to see how it works with swing: https://jsfiddle.net/o95dq69m/

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

If you are not afraid of using extra libraries, go ahead and try jQuery-UI , there is a ton of easing functions available there, like easeInExp : https://jsfiddle.net/o95dq69m/1/

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