changing font color with multiple .animate functions on multiple divs

Question

So I am trying to change the font color of a div when you hover over a different element.

Here is the fiddle: http://jsfiddle.net/5QDYE/

I'm using two animate functions within the hover. One animate for the background div, the other for the text div. It looks something like this.

function () {
    $('#background').animate({
        height: "40px",
        width: "80px",
        marginTop: "0px",
        marginLeft: "0px"
    }, 500);
    $("#text").animate({ color: "#FFF" }, 500);
}, function () {
    $('#background').animate({
        height: "0px",
        width: "0px",
        marginTop: "20px",
        marginLeft: "40px"
    }, 500);
    $("#text").animate({ color: "#000" }, 500);
});

the background animation is working correctly, but the text will not change color.

Answer 1

If you are open to use css3, try.

function () {
    $('#background').animate({
        height: "40px",
        width: "80px",
        marginTop: "0px",
        marginLeft: "0px"
    }, 500);
    $("#text").css({ 'color': "#FFF", 'transition' : 'color 1s' });
}, function () {
    $('#background').animate({
        height: "0px",
        width: "0px",
        marginTop: "20px",
        marginLeft: "40px"
    }, 500);
    $("#text").css({ 'color': "#000", 'transition' : 'color 1s' });
});

Fiddle

It seems like animation works in jquery ui lesser version i.e 1.9.1 and 1.9.2. but in 2.x it fails to do color animation, because it has been separated out in a different color plugin package.

Fiddle