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

Leave a Comment

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


Scroll to Top