0

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

这是我到目前为止所拥有的：

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

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

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

谢谢，乔丹

4

3 回答 3

0

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

欲了解更多信息，请查看

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

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

于 2012-10-14T14:18:02.840 回答
0

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

尝试使用rgba()符号来强制使用特定的“透明”颜色。

$("li.menu").animate({backgroundColor:"rgba(0xff,0xef,0,0)"});
于 2012-10-14T14:19:59.390 回答
0

正如afshin所说，您确实不能通过jquery轻松更改背景颜色。但是，还有另一种方法！将文本放入 div 中，并赋予 div 与背景相同的颜色。（或者应该是什么颜色）

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

祝你好运。

于 2012-10-14T14:21:02.483 回答