Бібліотека jQuery UI. Ефекти анімації

10

Від автора: вітаю вас, друзі. У цій статті ми з вами продовжимо знайомитися з бібліотекою jQuery UI. У статті ми дізнаємося, як використовувати різні ефекти появи і зникнення бібліотеки jQuery UI.

Отже, нагадаю, у попередній статті ми з вами працювали з віджетом модальних вікон – dialog. При кліку по кнопці у нас з’являлося діалогове вікно, а при кліці по хрестику діалогового вікна – воно пропадало. Все досить просто, але недостатньо красиво, оскільки ефекти появи і зникнення не анімовані, все відбувається різко.

Однак бібліотека jQuery UI пропонує нам вирішити цю проблему, надаючи в наше розпорядження понад десяти анімаційних ефектів на вибір.

Библиотека jQuery UI. Эффекты анимации

Якщо нам не потрібні абсолютно всі ефекти, а необхідні лише деякі з них, тоді ми можемо виключити непотрібні на етапі складання бібліотеки jQuery UI на сторінці завантаження, знявши відмітку напроти того чи іншого анімаційного ефекту:

Библиотека jQuery UI. Эффекты анимации

Ну а далі все просто, власне, як і при використанні раніше розглянутих плагінів. Візьмемо для прикладу той же віджет dialog з попередньої статті і застосуємо різні ефекти. Для появи нехай це буде, скажімо, ефект clip, а для приховування модального вікна – ефект drop.

$(function(){
$(‘#dialog’).dialog({
autoOpen: false,
show: { effect: «clip», duration: 800 },
hide: { effect: «drop», duration: 800 },
});
$(‘#open’).click(function(){
$(‘#dialog’).dialog(‘open’);
});
});

Тепер відкриття та закриття діалогового вікна виглядає куди як приємніше. Ну і, звичайно ж, можна обійтися стандартними ефектами анімації бібліотеки jQuery, наприклад fadeIn/fadeout або slideDown/slideUp.

На цьому сьогодні все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і бібліотеці jQuery UI ви можете дізнатися з наших уроків або курсу. Удачі!