Как научить animate() работать с цветом. jQuery

jQuery, как вы знаете, умеет динамически изменять свойства элементов с помощью функции animate(), синтаксис:

$(this).animate({"width", "150px"}, 500);

Но дело в том, что функция поддерживает ограниченный список CSS-свойств. Фактически, это только те свойства, которые принимют числовые значения. Т.о, animate() не умеет работать с цветом.

Для решения этой проблемы существует плагин jQuery.color, который расширяет возможности animate(), позволяя ей работать с цветами.

Скачивается тут:  http://odenisova.ru/wp-includes/js/jquery.color.js, подключается в <header>, ниже библиотеки jQuery

Плагин расширяет работу функции до следующих свойств:

 

Псевдоним для animate Название свойства Расшифровка
backgroundColor background-color цвет фона
borderBottomColor border-bottom-color цвет нижней границы
borderLeftColor border-bottom-color цвет левой границы
borderRightColor border-right-color цвет правой границы
borderTopColor border-top-color цвет верхней границы
color color цвет текста
outlineColor outline-color цвет обводки

 

Например, цвет input при получении элементом фокуса, изменяем следующим образом:


$('.searchfield').focus(function(){
$(this).animate({
width: "150px",
backgroundColor: "white"}
);});

Главное, помнить, что функция работает с цветом только при заданном начальном значении фокуса!