Анимация цвета с помощью плагина 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);
  });
});
Вы можете улучшить этот пост, отредактировав его на Гитхабе.

Обо мне

Я живу в Берлине и работаю фронтенд-разработчиком в Хире, а в свободное время фотографирую, пишу, глажу своих собак и пью кофе.

Читайте обо мне на моём сайте и подпишитесь на мой блог о фотографии и твитер.