jQuery Animation Examples

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);