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

Обо мне

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

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