Animating background-color alpha channel: Firefox problem

Animating background-color alpha channel: Firefox problem

I've created a script which toggles the alpha channel of an element's background-color:

  1. $('.button').click(function() {
  2.       var bgcolor = $.Color($(this), 'background-color');
  3.       var opac = bgcolor.alpha();
  4.       opac = +!opac; bgcolor = bgcolor.alpha(opac);
  5.       $(this).animate({backgroundColor: bgcolor}, 100);
  6. });
However, I have discovered that when the alpha channel is zero, the computed style Firefox returns is the string  "transparent" not the full RGBA value.  Consequently, the returned Color object contains the RGB values null, null, null.

This strikes me as a bug (in Firefox of course, not jQueryUI).

1) it is obfuscating valid style properties.
2) According to  http://www.w3.org/TR/css3-color/#transparent "transparent" should be shorthand for rgba(0,0,0,0), ie black with zero alpha, so it isn't even an accurate implementation.

Does anyone know of a way around this issue - some kind of hack to get the true RGB values of an element that has opacity 0 that is cross-browser compatible?

Thanks