JQuery примеры пользовательского интерфейса - показать (Show)
Используйте специальные эффекты, чтобы показать совпадающие элементы.
Для получения дополнительной информации о .show()
подробные сведения о методах см API документации .Show () .
.show () Демо
Нажмите кнопку для предварительного просмотра эффектов.
<! DOCTYPE HTML> <HTML LANG = "EN"> <Head> <Meta Charset = "UTF-8"> <Title> JQuery UI эффекты - .Show () 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 === "масштаб") { Варианты = {процентов: 100}; } Иначе, если (selectedEffect === "размер") { Параметры = {к: {ширина: 280, высота: 185}}; } // Запуск эффекты $ ( "#effect") .Show (selectedEffect, опционы, 500, обратный вызов); }; // Функция обратного вызова обратного вызова () { setTimeout (функция () { $ ( "#effect: Видимый") .removeAttr ( "стиль") .fadeOut (); }, 1000); }; // Установить значение в соответствии с выбранными эффектами меню $ ( "#button") .click (функция () { runEffect (); возвращение ложным; }); $ ( "#effect") .hide (); }); </ Script> </ Head> <Body> <Div класс = "Toggler"> <Div ID = "эффект" класс = "UI-виджета-контента UI-краеугольный все"> <H3 класс = "UI-виджета-заголовка пользовательский интерфейс угла всех"> Display (Показать) </ 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>