jQuery + RGBA 颜色动画

Question

请问 jQuery 能否处理类似以下的动画效果：

rgba(0,0,0,0.2) → rgba(0,255,0,0.4)

我知道有一个插件可以处理颜色动画，但是这可能太现代了？

- Matrym

---

这个标记为重复的问题在stackoverflow上有一些有用的答案：https://dev59.com/rFHTa4cB1Zd3GeqPV-0V - jedierikb

Answer 1

使用CSS3动画（无需JavaScript）

您也可以使用CSS3动画实现同样的效果。请参见下面的内容：

步骤1：为您的动画创建一个关键帧。

@keyframes color_up {
    from {
        background-color: rgba(0,0,0,0.2);
    }
    to {
        background-color: rgba(0,255,0,0.4);
    }
}

步骤2：使用动画规则。

  animation-name: color_up;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;

演示: http://jsfiddle.net/2Dbrj/3/

使用jQuery

jQuery现在支持颜色动画，同时也支持RGBA。这实际上是从一种颜色到另一种颜色的动画。

$(selector).animate({
  backgroundColor: 'rgba(0,255,0,0.4)'
});

演示: http://jsfiddle.net/2Dbrj/2/

- Selvakumar Arumugam

---

@DjangoReinhardt 更新了带有CSS3的答案。 - Selvakumar Arumugam

CSS3 JSFiddle 在 Chrome 中似乎无法正常工作。不过还是谢谢！ - Chuck Le Butt

@Monk 你需要在关键帧中添加-webkit-，请参见http://jsfiddle.net/rparree/2QsL6/1/。 - raphaëλ

更好的解决方案！！ - Myo Win

Answer 2

哦，没关系了。找到了一个很棒的jquery color插件修改版。

http://pioupioum.fr/sandbox/jquery-color/

- Matrym

---

嗯，对于那些感兴趣的人，再添加一个随机酷炫小贴士。RGBA跨浏览器通过PHP图像生成：http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/ - Matrym

很遗憾，这个修改过的版本似乎不支持现代浏览器 :( - Chuck Le Butt

Answer 3

使用jquery UI来处理这个问题，$(object).animate({color : 'rgba(0,0,0,.2)'},500)

- ilovebali