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

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

Answer 2

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

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

Answer 3

You may consider using jQuery-UI. Its .animate() function does not support animate the fill property by default. But as it uses the jQuery Color Plugin to animate colors, you can simply use jQuery.Color.hook() to allow additional css properties be animated. See documentation.

jQuery.Color.hook( "fill stroke" );

Demo