jQuery Animation Examples

Basic animation can be performed by various methods such as animate(), fadeIn(), fadeOut().

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 stroke on every <path> inside the selected <svg> element, using stroke-dasharray and stroke-dashoffset properties.
• 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);