How to animate a fill with jQuery

Question

I was using

element.css('fill','#000000');

and it works, but now I want to animate a fill so I wrote this:

$(element).animate({'fill': '#000000'}, 'slow');

but this doesn't work, why? I would add, I am working on SVG file.

Answer 1

Specifying the transition as part of the CSS may be simpler than adding another js lib:

$('#circle').css({fill: "red", transition: "2.0s"});

Answer 2

JQuery does not not support the animation of SVG elements, nor does JQuery UI. You can, however, use the JQuery SVG plugin, and do the following.

$('#circle').animate({ svgFill: 'red' }, 4000);

Demo on JSFiddle