Question

我想在悬停时使某些文字的背景颜色淡入/淡出。由于文本位于图像的顶部，我希望背景颜色从透明度淡入然后再变为透明。

这是我到目前为止所做的：

    $('#nav li.menu').hover(
    function () {
        $(this).animate({backgroundColor: "#FFEF00"},300);

    }, 
    function () {
        $("li.menu").animate({backgroundColor: "Transparent"},300);         
    }
);

但是，当我运行此代码时，动画会在开始制作动画之前将背景颜色变为白色。有谁知道我怎么解决这个问题？

谢谢， MJ

Answer 1

所有动画属性都应设置为单个数值，大多数非数字属性无法使用基本jQuery功能进行动画处理（例如，宽度，高度或左边可以设置动画但背景颜色不能，除非使用jQuery.Color()插件）。除非另有说明，否则属性值被视为多个像素。可以在适用的情况下指定单位em和％。

了解更多信息，请查看

http://api.jquery.com/animate/

http://desizntech.info/2009/06/playing-with-jquery-color-plugin-and-color-animation/

Answer 2

“透明”本身并不意味着什么。颜色由红色，绿色，蓝色和alpha定义。由于页面的默认背景颜色是白色，因此“透明”实际上被翻译为“带有alpha 0的白色”。

尝试使用rgba()表示法强制使用特定的“透明”颜色。

$("li.menu").animate({backgroundColor:"rgba(0xff,0xef,0,0)"});

Answer 3

正如afshin所说，你确实无法通过jquery轻松改变背景颜色。然而，还有另一种方式！将文本放在div中，并为div提供与背景相同的颜色。（或者它应该是什么颜色）

然后，在你的css中创建另一个类或id，并使用jquery来改变悬停时的类/ id。（.getElement命令，如果你需要知道）

祝你好运。

动画背景颜色从/到透明

3 个答案: