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

Question

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

这是小提琴：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' });
});

小提琴

似乎动画在 jquery ui 较小版本中工作，即 1.9.1 和 1.9.2。但在 2.x 中它无法进行彩色动画，因为它已被分离到不同颜色的插件包中。

小提琴