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
Вот так можно исправить ситуацию, если анимация фона не работает.
Делитесь полезными материалами в социальных сетях.