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

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

От автора: приветствую вас, друзья. В этой статье мы с вами продолжим знакомиться с библиотекой 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 вы можете узнать из наших уроков или курса. Удачи!

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree