JQuery UI пример - Hide (Скрыть)
Использование пользовательских эффектов, чтобы скрыть соответствующие элементы.
Для получения дополнительной информации о .hide() подробные данные о методах, см API документации .hide () .
.hide () Демо
Нажмите кнопку для предварительного просмотра эффектов.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI эффекты - .hide () Demo </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
.toggler {ширина: 500px; высота: 200px;}
#button {утеплитель: .5em 1em; текст-отделка: нет;}
#effect {ширина: 240px; высота: 135px; обивка: 0.4em; положение: относительная;}
#effect h3 {маржа: 0; обивка: 0.4em; выравнивания текста: центр;}
</ Style>
<Script>
$ (Function () {
// Запуск выбранной функции эффект runEffect () {
// Выведите эффекты типа вар selectedEffect = $ ( "#effectTypes") .val ();
// Большинство эффектов не нужно вводить параметры по умолчанию параметры доставки VAR = {};
// Некоторые специальные эффекты с требуемыми параметрами, если (selectedEffect === "масштаб") {
Параметры = {процент: 0};
} Иначе, если (selectedEffect === "размер") {
Параметры = {к: {ширина: 200, высота: 60}};
}
// Запуск эффекты $ ( "#effect") .hide (selectedEffect, опционы, 1000, вызов);
};
// Функция обратного вызова обратного вызова () {
setTimeout (функция () {
$ ( "#effect") .removeAttr ( «Стиль») .hide () FadeIn () .;
}, 1000);
};
// Установить значение в соответствии с выбранными эффектами меню $ ( "#button") .click (функция () {
runEffect ();
возвращение ложным;
});
});
</ Script>
</ Head>
<Body>
<Div класс = "Toggler">
<Div ID = "эффект" класс = "UI-виджета-контента UI-краеугольный все">
<H3 класс = "UI-виджета-заголовка пользовательский интерфейс угла всех"> Hide (Скрыть) </ h3>
<P>
Etiam либеро neque, luctus а, eleifend включенные в другие группировки, Semper в, Lorem. Sed Pede. Nulla Lorem Метус, adipiscing ут, luctus СЭД, hendrerit витэ, ми.
</ P>
</ Div>
</ Div>
<Выбрать Name = "эффекты" ID = "effectTypes">
<Значение Option = "слепые"> Оттенки эффекты (эффект жалюзи) </ вариант>
<Option значение = "отскока"> отскок эффекты (Отказов эффект) </ вариант>
<Option значение = "клип"> Клип эффекты (клип Effect) </ вариант>
<Значение Option = "падение"> Посадочные эффекты (эффект снижения) </ вариант>
<Option Value = "взрываются"> эффекты взрыва (Explode эффект) </ вариант>
<Вариант значение = "фолд"> складывающееся эффекты (двойной эффект) </ вариант>
<Option Value = "изюминка"> эффекты выделить (Выделите эффект) </ вариант>
<Option значение = "пшик"> эффекты расширения (Puff Effect) </ опции>
<Option значение = "пульсируют"> бить эффекты (пульсировать Effect) </ вариант>
<Значение Option = "Масштаб"> Увеличить эффекты (эффект масштаба) </ вариант>
<Option значение = "трясти"> Вибрация эффекты (Shake Effect) </ вариант>
<Значение Option = "размер"> Размер эффекты (размер эффекта) </ вариант>
<Значение Option = "слайд"> слайд-эффекты (Slide Effect) </ вариант>
</ Select>
<a href="#" id="button" class="ui-state-default ui-corner-all"> запускать эффекты </a>
</ Body>
</ HTML>