Цветовая анимация jQuery + RGBA

Question

Кто-нибудь знает, может ли jQuery обрабатывать анимацию, например:

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

Я знаю, что есть плагин для обработки цветных анимаций, но это может быть слишком современным?

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 animation с поддержкой 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)