Animating “src” attribute

Question

I have an HTML document. It looks like this:

When the user hovers \"stackinfo\" image, I w

Answer 1

The JQuery color plugin will allow you to animate colors.

https://github.com/jquery/jquery-color

So you could have an png with transparent background and animate the background of the container holding the png. If you can do your text in a websafe font, then you could animate that too...

Or you can make your SVG image, embed the svg xml directly into your html (probably not going to work in older versions of IE since they have terrible SVG support w/o svg plugins)

Using the jquery.color.js we just add a hook to allow the svg fill property and then make a hover function like:

jQuery.Color.hook('fill');

var animationSpeed = 200;

$('#svgwrapper svg').hover(    
    function(){    
        $(this).animate({backgroundColor:'#000000'}, animationSpeed)
        .find('path').animate({fill:'#ffffff'}, animationSpeed);
    },                         
    function(){
         $(this).animate({backgroundColor:'#ffffff'}, animationSpeed)
        .find('path').animate({fill:'#000000'}, animationSpeed);
    }
);

Here is a working fiddle of the SVG method. Works in IE9 and current versions of firefox, opera, chrome and safari

http://jsfiddle.net/webchemist/hBHBn/11/