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

23.04.2011Рубрика: 6. Wordpress и jQuery UIАвтор: Дмитрий

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. Все зависит от конкретных требований разработчиков.

Добавить комментарий