jQuery getting NaN error when trying to set border color (but it works?)

Question

I'm changing the border color of an object via an animation:

 $listItem.siblings('li').andSelf().find('img').animate({ 
   borderTopColor: defaultThumbBorderColor,
   borderBottomColor: defaultThumbBorderColor,
   borderLeftColor: defaultThumbBorderColor,
   borderRightColor: defaultThumbBorderColor
    }, 500 );

In Firefox, this works. However, I get this error in the console log:

Warning: Expected number or percentage in rgb() but found 'NaN'.  Error in parsing value for 'border-bottom-color'.  Declaration dropped.

It seems as if jQuery wants a number for those properties. But even though I'm passing in a string ('red', for instance) it works, but logs that error.

Any idea why?

Bonus question: I can't seem to apply all four border colors with one line via 'borderColor' or 'border-color'. Is the only way to do that as above where you set the individual color of each of the four sides? The problem I run into with the above is that it usually works. But once in a while it'll not animate one of the four borders on a seemingly random item in the array. So, an example scenario: if I have 20 items, it'll animate all four borders on 18 of the items, then 3 of the borders on 2 of them. If it matters, I'm attaching the border to an image. Perhaps that's the culprit? I'll do some testing...

UPDATE...well, it's not an issue if it specifically being an image. I appears to maybe be a performance glitch (maybe browser? Maybe jQuery?)

If I have a group of elements that I need to change all 4 border colors on at once, most of the time it works, but maybe 1 our of 3 times, 1 or two out of the 20 or so elements will only animate 3 of their borders rather than all four.

At this point, I think I just have to pad the divs and use a background color instead.

Answer 1

I assume that you are using the official jQuery animate to color plugin. If you check it's source you can see that it overrides following properties:

// We override the animation for all of these color styles
jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'])

This explains why borderColor doesn't animate all the borders to the specified color.

Speaking about NaN problem, I think it is a bug. I had the same problem, when I was trying to animate about 30 objects simultaneously to a specific background color. Some animations were just stopping randomly. So workaround with padding-and-background might not work.

Answer 2

most of the time it works, but maybe 1 our of 3 times, 1 or two out of the 20 or so elements will only animate 3 of their borders rather than all four.

I was having the same problem.

Apparently there was a bug in the color animations plugin which is now fixed. (http://dev.jqueryui.com/ticket/4251)

And here are the two lines they they changed...

http://dev.jqueryui.com/changeset/3269

I added the above changes to the plugin and haven't had any problems with it since.

Hope this is helpful.

Travis