Цветовая анимация с помощью jQuery UI

Дата публикации:Апрель 23, 2011

jQuery UI обладает встроенным плагином Color, который позволяет выполнять цветовую анимацию. В пятой главе мы уже успели познакомиться с плагином Color, входящим в сборку WordPress. В данном разделе мы выполним цветовую анимацию при помощи jQuery UI.

Нам не потребуется отдельно регистрировать плагин Color, поскольку мы уже выполнили подключение jQuery UI. Давайте анимируем цвет заголовка с помощью динамики easeOutBounce:

...
jQuery(".post h2").hover(function(){
    jQuery(this).animate({'backgroundColor':'#ccccff'}, 2000,
      'easeOutBack');
  }, function(){
      jQuery(this).animate({'backgroundColor': '#999999'}, 2000,
        'easeOutBack');
  });
...

Как видно на скриншотах, сначала заголовок станет светло-голубым, а потом вернется к серому:

Использование анимационной динамики и изменения цвета с помощью плагина jQuery UI ничем не отличается от аналогичного применения плагинов Easing и Color. Все зависит от конкретных требований разработчиков.

Поделиться

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.