jQuery + RGBA彩色动画

Question

有谁知道jQuery是否可以处理像：

这样的动画

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

我知道有plugin处理彩色动画，但这可能太现代了？

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;

DEMO： http://jsfiddle.net/2Dbrj/3/

使用jQuery

jQuery现在支持 color动画以及 RGBA 支持。这实际上是从一种颜色到另一种颜色的动画。

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

DEMO ：http://jsfiddle.net/2Dbrj/2/

Answer 2

呃，没关系。找到了对jquery颜色插件的惊人修改。

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

Answer 3

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