jQuery.color — учим animate работать с цветом

Для динамического изменения свойств в jQuery служит функция animate. Она позволяет задать новое значение CSS-свойства и время, в течении которого произойдет плавное анимированное изменение от старого значения к заданному. Очень мощная функция! Но, как обычно, есть и ложка дегтя.

Проблема

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

Решение

К счастью, существует плагин, который расширяет возможности animate и делает ее еще мощнее. Прошу любить и жаловать — jQuery.color! С его помощью в список понятных animate CSS-свойств можно добавить color, background-color, border-color и outline-color.

На практике это выглядит так:
демо пример.

Проверено в:

• IE 6-8
• Firefox 3
• Opera 9.5-10
• Safari 3

Что качать?

• jquery.js (55.9 Kb) — библиотека jQuery версии 1.3.2;
• jquery.color.js (3.66 Kb).

Быстрый старт

Подключаем jQuery и плагин:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.color.js"></script>

В CSS явно задаем начальный цвет:

div{
	background-color:#0CF;
}

Теперь используем функцию animate, например при наведении мыши:

<script type="text/javascript">
jQuery(document).ready(function(){

jQuery("div").mouseenter(
  function () {
	jQuery(this).animate({
		backgroundColor:"#03C",
    }, 500 );
});

jQuery("div").mouseleave(function() {
	jQuery(this).animate({
		backgroundColor:"#0CF",
    }, 500 );
});

});
</script>

А теперь подробнее

Плагин позволяет работать со следующими CSS-свойствами:

Пример:

Меняем цвет границ th при наведении мыши:

jQuery("th").mouseenter(
  function () {
	jQuery(this).animate({
	borderBottomColor:"#f00",
	borderLeftColor:"#f00",
	borderRightColor:"#f00",
	borderTopColor:"#f00",
     }, 800 );
  });

jQuery("th").mouseleave(function() {
	jQuery(this).animate({
	borderBottomColor:"#000",
	borderLeftColor:"#000",
	borderRightColor:"#000",
	borderTopColor:"#000",
     }, 800 );

});

Особенность

Помни, что нужно обязательно задать начальное значение цвета. Иначе анимация не сработает!

Плюсы:

• работает во всех популярных браузерах;
• небольшой размер;
• удобство в использовании: никаких дополнительных манипуляций, просто расширяет функциональность animate, добавляя возможность изменения цвета.

Минусы:

• не обнаружено.

Еще одно решение

Плавно окрасить блок можно и по-другому, используя эффект switchClass из набора UI для постепенного применения класса. Формулировочка «постепенное применения класса» достаточно хорошо описывает визуальный эффект, хотя, конечно, постепенно применяется не сам класс, а новые значения свойств, заданных в нем.

Выглядеть это может примерно так:

.green{
	background-color:#0F0;
}
.red{
	background-color:#F00;
}

jQuery("div").click(function () {
    jQuery(this).switchClass("green", "red", 1000);
});

Но в этом варианте придется подключать целый ряд библиотек из набора UI. Подробнее с switchClass можно ознакомиться в официальной документации UI.

Плюс:

• применение класса дает более гибкий механизм, чем просто функция animate. Ведь тут мы не ограничены в выборе одновременно меняющихся свойств.

Минус:

• достаточно «тяжелый» метод — библиотеки прилично весят.

Выводы:

Если требуются более сложные эффекты, чем «тянет» animate, можно использовать эффект switchClass из набора UI. Но если задача ограничивается плавным изменением цвета — применяй более легкий плагин jQuery.color.

JQuery.color делает мою любимую функцию animate еще лучше. Очень понравилось именно то, что он не добавляет никаких лишних классов или id. Просто расширяет множество возможных параметров animate. Юзать всем для создания красивого эффекта плавного изменения цвета!

Материалы:

• Official jQuery plugin :: Color Animations
• jQuery UI :: switchClass