CODEWITHSUNDEEP
javascriptjquery
L. kiju
L. kiju

Reputation: 25

How can you make animate faster and faster?

How can you make animate faster and faster?

You can see by looking at the code. I've always had the animation effect at the same speed. But I wanted to have an animation effect that was slow at first, and then fast. How can you do that? I also want to know how to be slow at first, then faster in the middle, and then slower again.

$('.menu').animate({left : '0px'}, 500);

Upvotes: 1

Views: 729

Answers (1)

tnkh
tnkh

Reputation: 1839

I think those animations effects you mentioned are as follows, you can cross check to see whether these are the intended effects.

ease-in: slow at the beginning, fast/abrupt at the end;

ease-out: fast/abrupt at the beginning, slow at the end;

ease-in-out: the change happens slowly both at the beginning and end, and speeds up only in the middle somewhere.

More refers to https://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp or https://css-tricks.com/ease-out-in-ease-in-out/

However, to use JQuery animate function, you can combine any of the effect above with jquery animate function like below $('.menu').animate({left : '0px'}, 500,"easein"); , with tweaks of the syntax.

This will only works if you provide a plugin that provides the easing function. More on http://api.jquery.com/animate/ .

Upvotes: 1

Related Questions