hover() 背景颜色问题答案

【问题标题】：hover() backgroundColor problemhover() 背景颜色问题
【发布时间】：2010-09-22 14:20:39
【问题描述】：

$('li > a').hover( 功能（）{ $(this).animate({ 背景颜色：'#2a639a', 颜色：'#fff' },300).corner('5px'); }, 功能（）{ $(this).animate({ 背景：'透明'，颜色：'#444' },300); } );

背景有什么问题：“透明”？变回白色，不透明

【问题讨论】：

【解决方案1】：

需要注意的重要一点：CSS 中的透明不同于 0% 不透明度。

不透明度可以分级，而透明则可以打开或关闭。因此，您不能为纯色或从纯色设置透明动画并期望平滑过渡。如果您尝试，大多数浏览器会将其视为黑色或白色以用于动画目的，我认为这就是您在此处看到的。

动画不透明度可能会给你一个更平滑的过渡，当然它是不同的（对于初学者来说，它会影响整个元素，而不仅仅是背景，另外还有浏览器兼容性问题需要考虑）。

【讨论】：

【解决方案2】：

您不能为背景属性设置动画。

也许您可以使用精灵并使用BackgroundPosition Plugin

【讨论】：

【解决方案3】：

仅使用 jQuery 为背景颜色设置动画是不可能的。 jQuery 仅支持in the jQuery-API 中所述的数值，您可以使用jQuery UI 为背景颜色设置动画。

【讨论】：