Basic animation can be performed by various methods such as animate(), fadeIn(), fadeOut().
Table of Contents
Best Animation Plugins
Let’s take a look at some great libraries for animation. You can try them before trying to create own animation with animate() method.
- Animsition – A simple and easy jQuery plugin for CSS animated page transitions which supports effects like Fade, Zoom, Rotate, Flip.
- jQuery Color – Plugin for color manipulation and animation support.
- DrawSVG – Lightweight, simple to use jQuery plugin to animate SVG paths. This plugin uses the jQuery built-in animation engine to transition the
strokeon every<path>inside the selected<svg>element, usingstroke-dasharrayandstroke-dashoffsetproperties. - Oridomi – It does only one effect, folding up a DOM element like a paper.
- jquery.animate-enhanced – An enhanced version of animate(). It can detect CSS transitions for Webkit, Mozilla and Opera and convert animations automatically.
- Motio – Motio is a small JavaScript/jQuery library for simple but powerful sprite based animations and panning.
- Turn.js – It is used to make a flip book with HTML5.
- jBlitter – Create HTML5 canvas animations with image sprites and blitting.
- Transit – Super-smooth CSS transitions & transformations for jQuery
Animate elements with animate()
//change height, width
$("#container").animate({height: "500px"});
$("#container").animate({width: "50%"});
//move from right to left: get left side's position then move it to 0 within 3 seconds.
var left = $('#animator').offset().left;
$("#animator").css({left:left}).animate({"left":"0px"}, 3000);
