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
An approximate answer to the right problem is worth a good deal more than an exact answer to an approximate problem.
John Tukey
Sourcery
  • Since 2016 ⋅ PureScript, Elm
  • Since 2015Haskell
  • Since 2014 ⋅ UnityScript
  • Since 2012 ⋅ OpenGL+GLSL
  • Since 2011 ⋅ Go (golang), WebGL, Node.js
  • Since 2008F#, Python, Lisp / Scheme
  • Since 2006 ⋅ SharePoint
  • Since 2004 ⋅ Prolog
  • Since 2003 ⋅ XSLT, XPath
  • Since 2002 ⋅ C#, ASP.NET
  • Since 2001 ⋅ Java, PHP
  • Since 2000 ⋅ SQL, CSS, JavaScript, VisualBasic
  • Since 1999 ⋅ HTML, ASP
  • Since 1998 ⋅ Basic, Pascal
More about me..
Making-of
Site theme: none; hand-crafted.
Static site gen: HaXtatic.
Icons, logos, fonts: © respective owners.