animate and fill property

[[email protected]…]

I have a bug when i try this :

$(this).animate({"fill": "black"}, "fast");

with the firefox's console i've :

Expected color, but 'NaNpx' find. Error of analysis of the value for 'fill'.

$(this).css("fill", "black"); works fine.

I use a SVG document

[addyosmani]

Thanks for submitting a ticket to the jQuery Bug Tracker! Could you please also provide us with a reduced test case which reproduces the issue you're describing on ​http://jsFiddle.net?. This will assist us in fully evaluating the bug you're reported.

[jitter]

I don't think this is a bug for the following reasons

1. jQuery doesn't reliably support working with SVG at the current time as far as I'm aware. Check #7584 for progress on this issue.

2. The animate() documentation says

   All animated properties should be a single numeric value [...] properties that are non-numeric cannot be animated using basic jQuery functionality.

So currently you can't animate the fill property with jQuery core alone.

---

To get done what you want anyway, there are 2 options, which both include slightly adapting existing plugins so they support the fill property (adding the string fill to list of other color-related properties).

• For animating colors there is an offical ​jQuery color plugin

• If you are using jQuery 1.4.3+ you could also use the new cssHooks functionality. e.g. The ​jquery-cssHooks plugin already has a hook for color animation ​color.js