有没有办法在没有jquery.color的情况下为rgba背景的alpha设置动画？

我需要使用jQuery的animate（）从

rgba（255255255,0.5）

到

rgba（255255255,0.9）

设置背景动画，而无需使用jQuery.color插件和更改CSS不透明度。 背景色始终相同（白色），我只需要为rgba的alpha设置动画。

---

有什么建议吗？

唯一的方法是使用css不透明度。事实上，jQuery的animate（）也使用它。

例如类似这样的东西

---

您可以使用带有所需动画的预制CSS类，然后使用jQuery打开/关闭该类

这是一把小提琴：

$（'#按钮1'）。单击（函数（）{
$（'.square'）.removeClass（'fadeMeIn'）.addClass（'fadeMeOut'）；
});
$（'#按钮2'）。单击（函数（）{
$（'.square'）.removeClass（'fadeMeOut'）.addClass（'fadeMeIn'）；
});
.square{
高度：50px；
宽度：50px；
利润率：10px；
背景色：rgba（255,0,0,0.8）；
}
.淡出{
-webkit动画：faeOutRGBA 1s线性；
-moz动画：faeOutRGBA 1s线性；
-o-动画：faeOutRGBA 1s线性；
动画：faeOutRGBA 1s线性；
背景色：rgba（255,0,0,0）；
}
法德明先生{
-webkit动画：faeInRGBA 1s线性；
-moz动画：faeInRGBA 1s线性；
-o-动画：faeInRGBA 1s线性；
动画：faeInRGBA 1s线性；
背景色：rgba（255,0,0,0.8）；
}
@-webkit关键帧faeOutRGBA{
0% {
背景色：rgba（255,0,0,0.8）
}
100% {
背景色：rgba（255,0,0,0）；
}
}
@-moz关键帧faeOutRGBA{
0% {
背景色：rgba（255,0,0,0.8）；
}
100% {
背景色：rgba（255,0,0,0）；
}
}
@-o-关键帧faeOutRGBA{
0% {
背景色：rgba（255,0,0,0.8）；
}
100% {
背景色：rgba（255,0,0,0）；
}
}
@关键帧faeOutRGBA{
0% {
背景色：rgba（255,0,0,0.8）；
}
100% {
背景色：rgba（255,0,0,0）；
}
;
}
@-webkit关键帧faeInRGBA{
0% {
背景色：rgba（255,0,0,0）
}
100% {
背景色：rgba（255,0,0,0.8）；
}
}
@-moz关键帧faeInRGBA{
0% {
背景色：rgba（255,0,0,0）；
}
100% {
背景色：rgba（255,0,0,0.8）；
}
}
@-o-关键帧faeInRGBA{
0% {
背景色：rgba（255,0,0,0）；
}
100% {
背景色：rgba（255,0,0,0.8）；
}
}
@关键帧faeInRGBA{
0% {
背景色：rgba（255,0,0,0）；
}
100% {
背景色：rgba（255,0,0,0.8）；
}
;
}

淡出
淡入

也许你还需要：

if (!$obj.is(':animated')) {
    $obj.animate(...);
}

这不会影响背景的不透明度unfortunately@Molecule，@PaulPRO:在这种情况下，我需要将不透明度更改为1而不是0.9，对吗？@PaulPRO，我不知道如何只更改背景的不透明度。然而，这可能是通过一些难看的技巧来完成的，比如增加相同大小的额外div，需要背景，并使用绝对定位和zIndex定位在目标块后面。@Ken，是的。不要忘记，如果你想让它成为交叉浏览器，你必须应用一些，它实际上可以短得多——但我为动画提供了跨浏览器支持
if (!$obj.is(':animated')) {
    $obj.animate(...);
}