AnimateClass/AnimateStyle Plugin for jQuery (v0.2)
This is the animateClass Plugin, using the great build-in animate() function of jQuery.
This will set a new class as defined inline or in your stylesheet on a given element and generates
an animation from the current state to the state with class.
Inspired by Bernie's Better Animation Class, I also wrote a second function
that get's written styles for the animation. 'This is just a mapping to animate()', people may say, but I correct: These functions also handle color transitions, regardless of
notation.
Usage:
$(filter).animateClass(newClass,[oldClass], duration);
$(filter).animateStyle(style, duration)
Download:
animateClass.js [9k] (Compressed [2.8k])
animateStyle.js [8.9k] (Compressed [2.7k])
When using colors:
The uncompressed functions both have a additional function for converting values like 'black' to its correct rgb value. While it's non-w3c, many people
find it quite convinient to use black/white and such stuff. However, I removed these from the compressed ones because of the large filesize. Best is not to
use them, anyway.
Example 1
$('div.ex1').animateClass('ex1-2', 1000)
This adds the properties of class 'ex1-2' to all divs with the class ex1 and animates this with the duration of 1 second.
Example 2
$('input.ex2').animateClass('ex2-2','ex2', 1000)
This starts and animation from class 'ex2' to 'ex2-2' and switches the classes on all divs with the class ex2.
Example 3
animateStyle("background: red;",500);