Skip to main content

Bug Tracker

Side navigation

#7984 closed bug (invalid)

Opened January 15, 2011 08:22PM UTC

Closed January 16, 2011 05:49PM UTC

animate and fill property

Reported by: morgan.s134@gmail.com Owned by: morgan.s134@gmail.com
Priority: low Milestone: 1.next
Component: effects Version: 1.4.4
Keywords: Cc:
Blocked by: Blocking:
Description

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

Attachments (0)
Change History (3)

Changed January 16, 2011 12:11AM UTC by addyosmani comment:1

priority: undecidedlow

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.

Changed January 16, 2011 12:11AM UTC by addyosmani comment:2

owner: → morgan.s134@gmail.com
status: newpending

Changed January 16, 2011 05:49PM UTC by jitter comment:3

component: unfiledeffects
resolution: → invalid
status: pendingclosed

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

  • 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