Анимация цвета с помощью плагина jQuery.Color()
Недавно команда jQuery выпустила бета-версию обновлённого плагина для анимации цвета jQuery.Color(). Плагин позволяет работать с цветовыми моделями RGBA и HSLA; читать и изменять (как на абсолютные значения, так и относительно текущего) отдельные компоненты цветов; анимировать цвет фона, текста и рамки.
Например, можно плавно изменять оттенок (hue) от 0 до 359 (т. е. от красного до красного со всеми остальными цветами между ними). (Первый пример по ссылке.)
(function animate() {
var block = $('#c1');
block.animate(
{
backgroundColor: $.Color(block.css('backgroundColor')).hue(
'+=179'
)
},
3000,
animate
);
})();
А вот более полезное применение: обратная связь при клике. Блок как бы зажигается на мгновение. Это достигается плавным увеличением яркости (lightness) на 40%. При этом скрипту не нужно задавать никакие цвета: он сам определяет и начальный цвет, и конечный. Я недавно использовал такой эффект в пятизвёздочном рейтинге — смотрится хорошо. (Второй пример по той же ссылке.)
$('#c2').click(function(e) {
var block = $(e.target);
var color = $.Color(block.css('backgroundColor'));
block.animate(
{ backgroundColor: color.lightness('+=0.4') },
300,
function() {
block.animate({ backgroundColor: color }, 300);
}
);
});