От автора: приветствую вас, друзья. В этой статье мы с вами продолжим знакомиться с библиотекой jQuery UI. В статье мы узнаем, как использовать различные эффекты появления и исчезновения библиотеки jQuery UI.
Итак, напомню, в предыдущей статье мы с вами работали с виджетом модальных окон – dialog. При клике по кнопке у нас появлялось диалоговое окно, а при клике по крестику диалогового окна – оно пропадало. Все достаточно просто, но недостаточно красиво, поскольку эффекты появления и исчезновения не анимированы, все происходит резко.
Однако библиотека jQuery UI предлагает нам решить данную проблему, предоставляя в наше распоряжение свыше десяти анимационных эффектов на выбор.
Если нам не нужны абсолютно все эффекты, а необходимы лишь некоторые из них, тогда мы можем исключить ненужные на этапе сборки библиотеки jQuery UI на странице загрузки, сняв отметку напротив того или иного анимационного эффекта:
Ну а дальше все просто, собственно, как и при использовании ранее рассмотренных плагинов. Возьмем для примера тот же виджет dialog из предыдущей статьи и применим различные эффекты. Для появления пусть это будет, скажем, эффект clip, а для скрытия модального окна – эффект drop.
|
1 2 3 4 5 6 7 8 9 10 |
$(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 вы можете узнать из наших уроков или курса. Удачи!
