Question

因此，当您将鼠标悬停在其他元素上时，我会尝试更改div的字体颜色。

我在悬停中使用了两个动画功能。一个用于背景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

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

1 个答案: