Basic animation can be performed by various methods such as animate(), fadeIn(), and fadeOut().
$(document).ready(function(){ $("button").click(function(){ $("p").fadeOut(); }); }); $(document).ready(function(){ $("button").click(function(){ $("p").slideUp(); }); }); $(document).ready(function(){ $("button").click(function(){ $("p").animate({ left: '250px', opacity: '0.5', height: '150px', width: '150px' }); }); });
Best Animation Plugins
Let’s take a look at some great libraries for animation. You can try them before trying to create your own animation with the animate() method.
- Animsition – A simple and easy jQuery plugin for CSS animated page transitions which supports effects like Fade, Zoom, Rotate, and 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);