Any elements in the html can be easily animated using a simple function in jquery -> animate(). You can change most of the properties of an element, and it will apply a smooth transition to these changes.
animate() takes following arguments :
properties : specify the new properties here.
duration : the time stretch for this animation in miliseconds.
easing : type of animation.
callback : the function to be called when animation completes.
In properties you specify the new properties of the element, like height, width, background etc. The duration is the time deadline within which the animation should complete. The third argument is easing, which is the type of animation desired and includes options like swing (default, gives accelerated effect), linear (constant effect), easeOutBounce (Bouncing effect). In callback we can define what we need to do once the animation is over.
So the complete function looks like this :
Below are some demos :
Bounce Effect :
Linear Effect :
Magnet Effect :