Wednesday, October 8, 2008 at 3:23 | 4 Comments jQuery Color Animations: Adding RGBA alpha channel support
I like using CSS rgba colors — it's freaking awesome to be able to use alpha channels directly with a given color, without having to mess with the CSS opacity settings. I also make heave use of jQuery's pretty sufficient out-of-the-box support for CSS-based animations and transitions. Using John Resig's jQuery plugin for Color Animations, the same good old $.animate() calls can be made to work seamlessly with CSS color properties such as backgroundColor, borderColor, outlineColor, color etc. The catch: RGBA colors are ignored. I tried using the colorBlend fading plugin but found two drawbacks: it had its own $.colorBlend() method rather than working seamlessly with $.animate() — which I didn't particularly mind — but it also caused sustained flickerings in my test cases (yes, even though the change log reported that many flickering bugs had been eliminated) and it doesn't technically work with an RGBA alpha channel but uses CSS opacity properties behind the scenes, which was not what I wanted.
The quick'n'dirty workaround:
I went back to John's Color Animations plugin and extended it to work with RGBA colors, too. Download the modified script here (all modifications are clearly denoted by /*BEGIN MOD*/ and /*END MOD*/ comments).
Reader Comments (4)
works in ff only(
Try this:
http://pioupioum.fr/sandbox/jquery-color/
Doesn't work. Trying to animate from "transparent" to "rgba(0,0,0,.2)". Tried several values, always results in solid black, with no animation.
The original posting worked for one specific project in 2008, but jQuery animations are certainly not our main business and depending on browsers and newer jQuery versions indeed what worked back then may not work anymore. Probably better to check out the various jQuery forums or other plugins out there.