Phil Schumann, Berlin
 Software Developer

08 Oct 2008 I like using CSS rgba colors — awesome to use alpha channels directly with a given color without abusing CSS opacity..

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

 
Cogent
The chief source of problems is "solutions".
Eric Sevareid
Sourcery
Working with since • 1998 » BasicPascal1999 » HTMLASP2000 » SQLCSSJSVB2001 » JavaPHP2002 » C#ASP.NET2003 » XSLT / XPath2004 » Prolog2006 » SharePoint2008 » F# • Python • Lisp2011 » Go • WebGL • Node.js • CoffeeScript • 2012 » OpenGLGLSL2015 » Haskell2016 » TypeScriptElm2017 » PureScriptVue.js
Details..
Making-of
Site theme: none; hand-crafted.
Static site gen: HaXtatic.
Icons, logos, fonts: © respective owners.