jquery - 在多个 div 上使用多个 .animate 函数更改字体颜色

Question

因此，当您将鼠标悬停在不同的元素上时，我试图更改 div 的字体颜色。

这是 fiddle :http://jsfiddle.net/5QDYE/

我在悬停中使用了两个动​​画功能。一个动画用于背景 div，另一个用于文本 div。它看起来像这样。

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);
});

背景动画正常工作，但文本不会改变颜色。

Answer 1

如果您愿意使用 css3，请尝试。

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

动画似乎在 jquery ui 较低版本(即 1.9.1 和 1.9.2)中有效。但在 2.x 中它无法执行彩色动画，因为它已在 different color plugin package 中分离出来.

Fiddle