JQuery UI пример - спецэффекты (эффект)
Применение элемента анимационных эффектов.
Для получения дополнительной информации о .effect() подробные данные о методах, см API документации .effect () .
.effect () Демо
Нажмите кнопку для предварительного просмотра эффектов.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI эффекты - .effect () 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; выравнивания текста: центр;}
.ui эффекты переноса {границы: 2px пунктирная серая;}
</ Style>
<Script>
$ (Function () {
// Запуск выбранной функции эффект runEffect () {
// Выведите эффекты типа вар selectedEffect = $ ( "#effectTypes") .val ();
// Большинство эффектов не нужно вводить параметры по умолчанию параметры доставки VAR = {};
// Некоторые специальные эффекты с требуемыми параметрами, если (selectedEffect === "масштаб") {
Параметры = {процент: 0};
} Иначе, если (selectedEffect === "перевод") {
Параметры = {к: "#button", Classname: "UI-эффекты переноса"};
} Иначе, если (selectedEffect === "размер") {
Параметры = {к: {ширина: 200, высота: 60}};
}
// Запуск эффекты $ ( "#effect") .effect (selectedEffect, опционы, 500, обратный вызов);
};
// Функция обратного вызова обратного вызова () {
setTimeout (функция () {
$ ( "#effect") .removeAttr ( «Стиль») .hide () FadeIn () .;
}, 1000);
};
// Установить значение в соответствии с выбранными эффектами меню $ ( "#button") .click (функция () {
runEffect ();
возвращение ложным;
});
});
</ Script>
</ Head>
<Body>
<Div класс = "Toggler">
<Div ID = "эффект" класс = "UI-виджета-контента UI-краеугольный все">
<H3 класс = "UI-виджета-заголовка пользовательский интерфейс угла всех"> спецэффекты (эффект) </ 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 значение = "замирание"> Fade эффекты (Fade эффект) </ вариант>
<Вариант значение = "фолд"> складывающееся эффекты (двойной эффект) </ вариант>
<Option Value = "изюминка"> эффекты выделить (Выделите эффект) </ вариант>
<Option значение = "пшик"> эффекты расширения (Puff Effect) </ опции>
<Option значение = "пульсируют"> бить эффекты (пульсировать Effect) </ вариант>
<Значение Option = "Масштаб"> Увеличить эффекты (эффект масштаба) </ вариант>
<Option значение = "трясти"> Вибрация эффекты (Shake Effect) </ вариант>
<Значение Option = "размер"> Размер эффекты (размер эффекта) </ вариант>
<Значение Option = "слайд"> слайд-эффекты (Slide Effect) </ вариант>
<Значение Option = "передача"> эффекты переноса (Transfer Effect) </ вариант>
</ Select>
<a href="#" id="button" class="ui-state-default ui-corner-all"> запускать эффекты </a>
</ Body>
</ HTML>
Облегчение Demo
В этом примере используется HTML Canvas элемент, рисовать все easings JQuery UI предоставляет. Нажмите на каждой карте, чтобы увидеть поведение ослабления. ,
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> JQuery UI эффекты - Смягчение 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>
.graph {
плавать: слева;
Левое поле: 10px;
}
</ Style>
<Script>
$ (Function () {
если (! $ ( "<холст>") [0] .getContext) {
$ ( "<Div>") .text (
"Ваш браузер не поддерживает холст, это свидетельствует о необходимости поддержки холста в браузере."
) .appendTo ( "#graphs");
возвращение;
}
вар я = 0,
ширина = 100,
высота = 100;
$ .each ($ .easing, Функция (имя, осущ) {
вар граф = $ ( "<DIV>") .addClass ( "график") .appendTo ( "#graphs"),
текст = $ ( "<DIV>") .text (++ я + "." + имя) .appendTo (график),
завернуть = $ ( "<DIV>") .appendTo (граф) .css ( 'переполнение', 'скрытый'),
холст = $ ( "<холст>") .appendTo (обертка) [0];
canvas.width = ширина;
canvas.height = высота;
переменная drawHeight = высота * 0,8,
cradius = 10;
CTX = canvas.getContext ( "2d");
ctx.fillStyle = "черный";
// Нарисовать фон ctx.beginPath ();
ctx.moveTo (cradius, 0);
ctx.quadraticCurveTo (0, 0, 0, cradius);
ctx.lineTo (0, высота - cradius);
ctx.quadraticCurveTo (0, высота, cradius, высота);
ctx.lineTo (ширина - cradius, высота);
ctx.quadraticCurveTo (ширина, высота, ширина, высота - cradius);
ctx.lineTo (ширина, 0);
ctx.lineTo (cradius, 0);
ctx.fill ();
// Нарисовать в нижней строке ctx.strokeStyle = "# 555";
ctx.beginPath ();
ctx.moveTo (ширина * 0,1, drawHeight + 0,5);
ctx.lineTo (ширина * 0,9, drawHeight + 0,5);
ctx.stroke ();
// Рисуем верхнюю строку ctx.strokeStyle = "# 555";
ctx.beginPath ();
ctx.moveTo (ширина * 0,1, drawHeight * 0,3 - 0,5);
ctx.lineTo (ширина * 0,9, drawHeight * 0,3 - 0,5);
ctx.stroke ();
// Нарисовать ослабление
ctx.strokeStyle = "белый";
ctx.beginPath ();
ctx.lineWidth = 2;
ctx.moveTo (ширина * 0,1, drawHeight);
$ .each (New Array (ширина), функция (позиция) {
вар состояние = позиция / ширина,
Вэл = осущ (состояние, положение, 0, 1, ширина);
ctx.lineTo (позиция * 0,8 + 0,1 * ширина,
drawHeight - drawHeight * VAL * 0.7);
});
ctx.stroke ();
// Динамически изменяющиеся клики graph.click (функция () {
заворачивать
.animate ({высота: "скрыть"}, 2000, имя)
.delay (800)
.animate ({высота: "шоу"}, 2000, имя);
});
graph.width (ширина) .height (высота + text.height () + 10);
});
});
</ Script>
</ Head>
<Body>
<Div ID = "графы"> </ DIV>
</ Body>
</ HTML>