JS rgbA animations
I like using CSS rgba colors — awesome to use alpha channels directly with a given color without abusing CSS opacity..
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-and-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).