jQuery Animation Examples

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



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

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.