从纯色到透明的动画背景颜色不起作用答案

【问题标题】：Animating background colour from solid to transparent isn't working从纯色到透明的动画背景颜色不起作用
【发布时间】：2011-12-14 18:46:26
【问题描述】：

为什么我不能为transparent 设置背景颜色的动画？这是我的代码：

$('#cs4').animate({'backgroundColor':'#ff6600'}, 2000);    

setTimeout(function() {    
    $('#cs4').animate({'backgroundColor':'transparent'}, 2000);
}, 2000);

伙计们，我已经有了插件。这不是问题。我的问题是如何使背景透明。用正常的颜色就可以了。

提前致谢

【问题讨论】：

查看 jQuery 动画到透明 [stackoverflow.com/questions/3679864/… [1]: stackoverflow.com/questions/3679864/…
您不想更改不透明度...而不是背景颜色吗？
hexxagonal，如果我改变不透明度，它也会隐藏文本。没什么大不了的；）

标签： jquery css

【解决方案1】：

如果没有插件，您将无法为背景颜色（或任何颜色变化）设置动画。 jQuery UI 这样做：http://jqueryui.com/

这是一个动画颜色变化的演示：http://jqueryui.com/demos/animate/

您可以使用只有此功能的下载工具构建一个小型版本的库。

【讨论】：

jQuery.color 插件也可以做到这一点。以防万一您不希望添加大量 UI。
这是一个很好的选择。 jQuery UI 的小版本还是 50KB 左右。尽管您不需要 CSS 来实现此功能。
我同意，CSS 实现通常非常好，但是如果您需要支持较旧的浏览器（它们仍然是浏览器使用中令人作呕的一部分），那么 CSS 就不行了。

【解决方案2】：

如果您不想使用额外的 jQuery 插件，请考虑使用 CSS3 动画。

你会失去一些旧浏览器的支持，但动画不是必需的功能。

示例语法（为简单起见，仅使用 -webkit 供应商前缀）：

#cs4 { -webkit-animation: fadeOut 2s ease-in; }

@-webkit-keyframes fadeOut {
    from {background:#ff6600;}
    to {background:transparent;}
}

Demo

More information

【讨论】：

你也可以用-webkit-transition，如果keyframes的表现比transitions快，你会奖励吗？
过渡是一种更好的方法
是的，您通常希望使用-transition 来制作像这样的简单动画。

【解决方案3】：

使用这个 jQuery 插件

http://www.bitstorm.org/jquery/color-animation/

【讨论】：

【解决方案4】：

试试这个：

$('#cs4').animate({'backgroundColor':'#ff6600'}, 2000);    

setTimeout(function() {    
    $('#cs4').animate({'backgroundColor':'rgba(255, 255, 255, 0)'}, 2000);
}, 2000);

【讨论】：

欢迎来到 Stack Overflow 并感谢您的回答。如果您还可以添加对问题所在以及为什么会有所帮助的解释，那就太好了...