jQuery CSSHook for animating background-color Alpha channel

HTML

<div id="i1"></div>
<div id="i2"></div>

CSS

div {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #000;
}

JavaScript

var rRgba = /^rgba\((\d+),\s*(\d+),\s*(\d+)\,\s*(\d+(\.\d+)?)\)$/,
rRgb = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/
function getRgbaColorValue(el) {
    var bg = $.css(el, 'background-color');
    if (bg.indexOf('rgba') !== -1) {
        bg = rRgba.exec (bg);
    } else {
        bg = rRgb.exec (bg);
        bg[4] = 1;
    }
    return bg;
};

$.cssNumber.backgroundColorAlpha = true;

$.cssHooks.backgroundColorAlpha = {
    get: function(el) {
        var rgba = getRgbaColorValue(el);

        return rgba[4];
    },
    set: function(el, value) {
        var rgba = getRgbaColorValue(el);

        el.style.backgroundColor = 'rgba(' + rgba[1] + ',' + rgba[2] + ',' + rgba[3] + ',' + value + ')';
    }
};

$.fx.step.backgroundColorAlpha = function(fx) {
    $.cssHooks.backgroundColorAlpha.set(fx.elem, fx.now + fx.unit);
};

$('#i1').animate({
    'background-color-alpha': 0
}, 0);
$('#i1').animate({
    'background-color-alpha': 1
}, 3000);

$('#i2').animate({
    'background-color-alpha': 0
}, 3000);