jQuery animate with opacity not working

Question

I am trying to get a flashing effect on a div whose background is initially at rgba(0,0,0,0) => originalColor and have it flash to rgba(237,155,0,1) => noticeFlashColor . To do this, I am using:

var noticeFlashEffect = function (applyTo, originalColor) {
    return setInterval(function () {
        $(applyTo).animate(
            { 'background-color': noticeFlashColor },
            flashTime,
            function () {
                $(applyTo).animate({ 'background-color': originalColor }, flashTime);
            }
        );
    }, (2 * flashTime));
};

However, I get this error every time I try to do this:

Uncaught TypeError: Cannot read property '0' of undefined

From this line in jQuery-ui:

fx.elem.style[attr] = 'rgb(' +
        Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0], 10), 255), 0) + ',' +
        Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1], 10), 255), 0) + ',' +
        Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2], 10), 255), 0) + ')';

But even stranger, none of the above variables seem to be null after checking it in the debugger.

EDIT: Further clarification: I am using jquery-ui.1.8.4 and the animation effect seems to work when animating to noticeFlashColor but not when going back.

Answer 1

It looks like this is only an issue in jQuery ui 1.8.4. I upgraded to 1.10 and it appears to be working correctly.