Усовершенствование эффектов с помощью jQuery UI

Возможно, вы ожидали, что после выбора подходящей темы мы сразу же приступим к обзору и размещению виджетов. Все верно, но перед этим нам необходимо пару слов сказать об анимации, которой мы занимались в пятой главе курса. Вам будет интересно узнать, что большинство анимационных действий и эффектов, которые мы производили ранее, можно было бы легко усовершенствовать с помощью плагина Jquery UI.

На момент написания данной статьи эффекты не были представлены в сборке WordPress, поэтому, чтобы использовать их, нам понадобится подключить jQuery UI к WordPress одним из двух способов: либо при помощи самостоятельной загрузки плагина в отдельную папку, либо через Google CDN.

Как мы уже говорили ранее, плагин jQuery UI предлагает отдельную функцию .effect(), содержащую в себе 15 различных анимационных эффектов. С ними всегда можно поэкспериментировать на официальной странице плагина.

Давайте применим эффект shake к заголовкам наших записей при наведении на них курсора мыши. Наряду с регистрацией и/или подключением необходимых jQuery и jQuery UI файлов, нам понадобится также добавить к теме файл custom-jquery.js, с которым мы и будем работать. Как только файл будет добавлен, мы можем внести в него следующий код:

jQuery(function(){
  jQuery(".post h2").hover(function(){
    jQuery(this).effect('shake', 200);
  }, function(){
      jQuery(this).effect('shake', 200);
  });
});

Вы можете увидеть данный эффект в действии на следующем скриншоте:

Помимо подключения разнообразных эффектов, плагин также позволяет расширить возможности стандартных функций .animate, .hide, .show, .toggle, .addClass, .removeClass и .toggleClass. При использовании jQuery UI отпадает необходимость в отдельном подключении плагина Easing.