Категория:
Опубликовано:

jQuery .animate() - меняем цвет динамически

Забавная функция для анимации в jQuery - .animate().

С её помощью можно придавать динамику элементам - изменять ширину, высоту, размеры шрифта и другие свойства, имеющие числовые свойства.

Но что делать если нужно анимировать, например background-color у блока? Ведь эта функция не работает со свойствами типа color, background-color, border-color и т.п.

Ниже будем решать эту проблему, с помощью плагина jQuery Color.

С помощью этого чуда можно исправить эту жестокую несправедливость по отношению к анимации цвета, и облегчить себе жизнь!

Скачать плагин можно с Git'а.

Подключаем его и наслаждаемся в полной мере функцией анимации:

jQuery("#block").animate({
  backgroundColor: "#abcdef"
}, 1500 );

На момент написания поста заявлена поддержка следующих свойств:

  • backgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • color
  • columnRuleColor
  • outlineColor
  • textDecorationColor
  • textEmphasisColor

Вот так можно исправить ситуацию, если анимация фона не работает.

Если у Вас возникли вопросы, замечания, предложения или просто благодарность - пишите в комментариях.
Делитесь полезными материалами в социальных сетях.