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 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 think I ran into the same problem as you on another project; I had a DIV inside of another DIV (which didn't have it's background explicitly defined.) I was trying to "flash" the background color of the inner DIV and was running into that error. Only after I assigned a specific color to the container DIV did the error go away.

Answer 2

I'm seeing this now, too. Find a solution yet?

Answer 3

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

Answer 4

For those having this issue with the jQuery color plugin, a good enough hack is to change

if ( fx.state == 0 ) {

to something low like

if ( fx.state <= 0.045 ) {

Oddly enough fx.state is not always 0, which is why the invalid property error gets thrown occasionally.

Answer 5

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 6

Rio thank you very much

Answer 7

I have the same problem. My custom code does throw error invalid parameter value in IE8 under windows7 64bit $("#profile-links-block li.active a.active").animate({color:"#5c5f2b"}, 1000); In IE7 and erlier everything was fine.

Answer 8

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 9

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 10

Hello, I have another solution, It woks to 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(",") + ")";

I Hope it works 4u Regards!