Animations are the hot trends now. Animations and Effects add interactivity to our pages and bring a splash of color and life to the otherwise monotonous web pages. Here, I will provide you with my handpicked collection of Best jQuery Animation and effect Plugins.

1. Step Carousel Viewer

Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific content on demand, or browse the gallery sequentially by stepping through x number of contents each time. A smooth sliding animation is used to transition between steps. The contents for the Step Carousel Viewer can be defined either directly inline on the page, or via Ajax and extracted from an external file instead. In both cases, the contents are simply DIVs with a shared CSS class name that wrap around each individual content.

2. 3D Image Carousel

3D Carousel creates a mini-interactive page that can be a fun addition to a site.

3. AD Gallery

An image gallery plugin with a list of thumbnails below the image. Not quite like Lightbox or Thickbox, but more of a showcase type of gallery.

4. Animate Clip Style Property

Quick "plugin" to support animation of the CSS style.clip property via the jQuery.fn.animate() facility in the same vein as John Resig's jquery.color.js plugin.

This is ultra-light weighing in at only 19 lines of code, 6 of which comments.

5. Animate to Class

Animate to Class is a jQuery plugin that make the use of jQuery.Animate() easier, you can animate directly to a class, without pass all params directly via javaScript. This is an alternative way to do animations using jQuery, you just need to create a new class in your CSS, and pass it as param.

6. Animated Collapsible DIV

This script collapses any DIV on the page and lets users manually toggle its appearance via a smooth "Web 2.0 style" animation. Three distinguishing features of this script are:

   1. Ability for the script to work on both DIVs that have an explicit CSS height attribute defined, and without.
   2. Ability to "group" multiple collapsible content instances to act as a single unit, so opening one closes the others.
   3. Persistence can be enabled on each collapsible content individually that will remember if the DIV has been expanded, and upon the user's return to the page within the same browser session, keep it expanded.
   4. Individually toggle various attributes of each collapsible content, whether a fade effect should be applied, the duration of the animation, an explicit height, plus whether the content should be hidden via scripting by default when the page loads.

7.  Animated Hover

Animated Hover provides animated transitions between hovered items for any jQuery project. Requires jQuery 1.2+ and Dimensions.

8. Animation Easing

Easing equations based on Robert Penner's work, modified for JQuery format. The "In" part of an animation is the start of it, the "Out" part is the end of it. If you apply "easing" at the "In" or the "Out" then the supplied animation 'curve' is most apparent at that point.

9. Autoimage

Provides scripted image animations; cross fade between images (using alpha transparency); smooth image based buttons.

10. Background-Position Animations

Adds the ability to do background-position animations to jQuery 1.2, and newer.

11.  Bounce

This project allows the user to extend the elements on the web page (created for use with 'textarea' elements, but no reason why it cannot be used elsewhere) with a bounce animation.

12. Broller

An Elegant and configurable rollover plugin. Simple configuration via tag attributes or advanced config from passed in options. Can be configured to affect another elements src other than the trigger point and even change the src of multiple images with different sources. simply.

13.  CanvasSwap

A jQuery plugin to induce an image swap on hover. Although this plugin does it's job of swapping out images extremely well , that's not what it's main intention is. What canvasSwap sets out to do is not only provide a great image swap utility, but it also allows swapping transparent PNG images in IE 6! (with the help of a PNG transparency script).

14. color Animations

Adds the ability to do color animations to jQuery 1.2, and newer.

15. colorBlend! Color fading plugin.

Based on the fade anything plugin, I wanted something a little more robust. This plugin accepts a javascript array of parameter objects.