How can I animate text colors using jQuery?

Question

$(document).ready(function(){
    $('a.nav_menu')
        .css( {backgroundPosition: "0 0"} )
        .mouseover(function(){
            $(this).animate({
            backgroundPosition:"(-650px 0)",
            'color': '#000000'
        }, {duration:700})
        })
        .mouseout(function(){
            $(this).animate({backgroundPosition:"(0px 0)"}, {duration:900, complete:function(){
                $(this).css({backgroundPosition: "0 0"})
            }})
        })
});

What is wrong with this? The text color doesn't change.

Answer 1

You need to either use jQuery UI effects or the color animation plugin to animate colors.

Answer 2

You need to use this plugin to animate colours.