jquery color animation throws Invalid property val

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 javascript error is thrown "Invalid Propery value." and it debugs into the jquery color plug-in code to this line...

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(",") + ")";

Here is the order of events as they are currently happening...

First, the window loads so on doc.ready it registers an event to be carried out when the update panel has finished refreshing like so...

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(yellowFade);

Where yellowFade is defined as...

function yellowFade() {
    window.setTimeout("$('#' + hyperlinkUrlId).animate( { backgroundColor: 'white' }, 2000)", 2000);
    window.clearTimeout();
}

Now, rarely I've had it crash right at this point but typically it is later, so I'll continue...

I then click a button titled "Generate" that creates a URL loads the ASP.Net hyperlink with the text for the URL it created and then via javascript sets it's background color to the yellow color to fade from via this...

$("#" + hyperlinkUrlId).css("background-color", "#FBFF9C");

I initially had it setting the color in the code behind via this code...

Url.BackColor = ColorTranslator.FromHtml("#FBFF9C");

But then I thought maybe the back color was getting set to something the jquery color plug-in couldn't recognize, or since it was being set server side the plug-in couldn't access it's style or something but changing it still had no effect on fixing the bug.

Finally, generate changes the URL's back color from white to yellow then as I said most of the time it fades just fine but rarely it throws an error "Invalid property value."

As far as I can tell my syntax is just the way it should be for using the color animations. I feel like the fact that I'm using an updatepanel might be wreaking havoc here but I'm not sure.

Does anyone have any insight into what might cause such a thing? It's been a real mess trying to debug since it happens so infrequently disregarding the fact that javascript is already a pain to debug.

Using jquery 1.3.1 and jquery.color 1.0 on Windows Vista. Using Visual Studio 2008. Let me know if there is anything I can clear up.

EDIT: Dang, not a single response yet. I've taken a bit of a hiatus from working on this but I just found the bug in another part of my app where I am doing the yellow fade. Both of these pages use an update panel. I'm not a fan of the update panel in many cases and it has definitely wreaked havoc on my jquery. I'm wondering if it has something to do with this. Oh, this was kind of implied with the whole Vista thing but I'll point out that I'm running on IIS7.

Does this provoke any insights?

Answer 1

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 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.