There are lots of handy jQuery APIs, but in my opinion, one of the jQuery fanciest API is .animate(). We can simply say that animate is about transitioning any CSS property you want. Let’s say you have this 100 X 100 pixels box and you want to change its size to 150 X 150 pixels once user clicks it. This is the ‘plain way’ of doing it:
While it gets the stuff done, compare the way its size is changing by using .animate():
Prettier, isn’t it? That’s what .animate does: it changes css properties (dimension, color, opacity, display, background color, you name it). However, rather than ‘jumping’ the values of the properties, it changes the CSS properties you stated by transitioning it from the current values to desired values, one step at time, which makes it looks animated. Hey, the name of the API is animate(), right? 
