javascript - 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;

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

使用 jQuery

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

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

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