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

Опубликовано: 23.08.2018

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

Technology Stacks - Computer Science for Business Leaders 2016

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


Как сделать 3D просмотр STL модели на сайте. WYSIWYG web Builder

На момент написания данной статьи эффекты не были представлены в сборке 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.

IRC (Internet Relay Chat)
rss