jquery color animation throws Invalid property value intermittently

Question

I\'m trying to animate the background for an ASP.Net hyperlink to do a yellow fade on an update panels refresh. So far it works almost all of the time, but occasionally a j

Answer 1

This doesn't appear to work if you are trying to animate some elements in certain browsers (works in Firefox, not in Google Chrome). For example, this will not work with an HTML Canvas. fx.start will be undefined.

My 'hack' to get it to work with HTML Canvas elements for example -

if (fx.start == undefined) { fx.start = getRGB('white'); }

Answer 2

The fix on the jQuery site is below (should be in a future release). In effects.core.js, change:

if ( fx.state == 0 ) {
    fx.start = getColor( fx.elem, attr );
    fx.end = getRGB( fx.end );
}

to:

if (!fx.colorInit) {
    fx.start = getColor(fx.elem, attr);
    fx.end = getRGB(fx.end);
    fx.colorInit = true;
}

This totally cleared the problem up for me.

Answer 3

I have another solution, it works for me. Just add these validation lines:

if (fx.start == undefined) { fx.start = getRGB('white'); } 
if (fx.end == undefined) { fx.end = getRGB('white'); }

Before this:

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

Answer 4

I've rewritten the color setter function, to prevent NaNs propagate into the RGB value, this solves the problem.

var r = Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0);
var g = Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0);
var b = Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0);
if (!isNaN(r) && !isNaN(g) && !isNaN(b))
{
    var rgb = "rgb(" + [r,g,b].join(",") + ")";
    fx.elem.style[attr] = rgb;
}

Answer 5

I was having similar problem with jquery.color.js. Resolved this by using jquery.effects.core.js (jquery ui effects core).

I hope it works for you as well.

Answer 6

I was having this same problem in IE8 with a background color animation on some td elemtents. It persisted even though I gave a background color to the tr.

I think I have it fixed now, by changing some code in jquery.ui.

Find this section:

// We override the animation for all of these color styles
$.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i, attr) {
    $.fx.step[attr] = function(fx) {
        if (fx.state == 0) {

Change:

if (fx.state == 0)

To:

if (fx.state == 0 || fx.start.constructor != Array || fx.end.constructor != Array)

Sometimes when this code is executed. fx.State is not 0, but fx.start and fx.end haven't been initialized as RGB arrays. In the updated code, we initialize the fx.start and fx.end arrays if they haven't been initialized.

That seems to have fixed it, but it's hard to be sure on an intermittent problem.

More details here: http://dev.jqueryui.com/ticket/4251