Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Эффекты
В параметре <Эффект>
метода effect()
(и в некоторых других методах) могут быть указаны следующие эффекты.
blind
— свертывание справа налево или снизу вверх или развертывание в противоположных направлениях. Рассмотрим опции эффекта.
mode
— режим эффекта; возможные значения —"show"
(показать) или"hide"
(скрыть); значение по умолчанию —"hide"
.direction
— направление движения; возможные значения —"vertical"
(по вертикали) или"horizontal"
(по горизонтали); значение по умолчанию —"vertical"
.
$("#div1").effect("blind", {
mode: "show",
direction: "horizontal"
}, 1000);
bounce
— перемещение элемента по горизонтали или вертикали заданное количество раз с затуханием (или нарастанием) колебаний. Рассмотрим опции эффекта.
mode
— режим эффекта; возможные значения —"show"
(показать),"hide"
(скрыть) или"effect"
; значение по умолчанию —"effect"
.direction
— направление движения; возможные значения —"up"
(вверх),"down"
(вниз),"left"
(влево) или"right"
(вправо). Если опцияmode
имеет значение"effect"
, то опцияdirection
задает начальное направление движения (движение с затуханием колебаний). Если опцияmode
имеет значение"show"
, то задается, откуда появится элемент (движение с затуханием колебаний), а при значении"hide"
— в какую сторону он исчезнет (движение с нарастанием колебаний). Значение по умолчанию —"up"
.distance
— максимальная дистанция (в пикселях); значение по умолчанию —20
.times
— количество колебаний; значение по умолчанию —5
.
$("#div1").effect("bounce", {
mode: "hide", // Скрыть элемент в конце эффекта
direction: "right", // Элемент исчезнет вправо
distance: 50, // Дистанция
times: 5 // Количество колебаний
}, 500);
clip
— свертывание элемента с двух сторон к центру или развертывание от центра (эффект включения или выключения старого телевизора). Рассмотрим опции эффекта.
mode
— режим эффекта; возможные значения —"show"
(показать) или"hide"
(скрыть); значение по умолчанию —"hide"
.direction
— направление движения; возможные значения —"vertical"
(по вертикали) или"horizontal"
(по горизонтали); значение по умолчанию —"vertical"
.
$("#div1").effect("clip", {
mode: "show",
direction: "horizontal"
}, 1000);
drop
— растворение элемента с перемещением в заданную сторону или проявление. Рассмотрим опции эффекта.
mode
— режим эффекта; возможные значения —"show"
(показать) или"hide"
(скрыть); значение по умолчанию —"hide"
.direction
— направление движения. Если опцияmode
имеет значение"show"
, то задается, с какой стороны появится элемент, а при значении"hide"
— куда он исчезнет. Возможные значения —"up"
(вверх),"down"
(вниз),"left"
(влево) или"right"
(вправо); значение по умолчанию —"left"
.
$("#div1").effect("drop", {
mode: "hide",
direction: "up"
}, 1000);
explode
— элемент рассыпается на части во всех направлениях или собирается из множества частей. Рассмотрим опции эффекта.
mode
— режим эффекта; возможные значения —"show"
(показать) или"hide"
(скрыть); значение по умолчанию —"hide"
.pieces
— количество частей; значение по умолчанию —9
.
$("#div1").effect("explode", {
mode: "show",
pieces: 18
}, 1000);
fold
— свертывает элемент сначала частично по вертикали, а затем полностью по горизонтали или, наоборот, сначала развертывает элемент частично по горизонтали, а затем — полностью по вертикали. Рассмотрим опции эффекта.
mode
— режим эффекта; возможные значения —"show"
(показать) или"hide"
(скрыть); значение по умолчанию —"hide"
.size
— размер (в пикселях) части, оставляемой при начальном частичном свертывании; значение по умолчанию —15
.horizFirst
— если указано значениеtrue
, то начальное свертывание будет не по вертикали (снизу вверх), а по горизонтали (справа налево). Окончательное свертывание будет производится снизу вверх. Значение по умолчанию —false
.
$("#div1").effect("fold", {
size: 30, // Ширина оставляемой части
horizFirst: true // Начальное свертывание по горизонтали
}, 1000);
highlight
— эффект за счет изменения цвета фона. Рассмотрим опции эффекта.
mode
— режим эффекта; возможные значения —"show"
(показать) или"hide"
(скрыть); значение по умолчанию —"show"
.color
— цвет фона; значение по умолчанию —"#ffff99"
.
$("#div1").effect("highlight", { color: "#ff0000" }, 300);
puff
— элемент увеличивается в размерах и растворяется или, наоборот, из полупрозрачного большого размера уменьшается до нормальных размеров. Рассмотрим опции эффекта.
mode
— режим эффекта; возможные значения —"show"
(показать) или"hide"
(скрыть); значение по умолчанию —"hide"
.percent
— размер в процентах; значение по умолчанию —150
.
$("#div1").hide("puff", { percent: 200 }, 1000);
pulsate
— мигание элемента заданное количество раз за счет изменения прозрачности элемента. Рассмотрим опции эффекта.
mode
— режим эффекта; возможные значения —"show"
(показать) или"hide"
(скрыть); значение по умолчанию —"show"
.times
— количество миганий; значение по умолчанию —5
.
$("#div1").effect("pulsate", {
mode: "hide",
times: 2
}, 1000);
scale
— свертывает элемент в точку или развертывает его из точки. Рассмотрим опции эффекта.
mode
— режим эффекта; возможные значения —"effect"
(просто эффект),"show"
(показать) или"hide"
(скрыть); значение по умолчанию —"effect"
.direction
— направление движения; возможные значения —"both"
(в точку),"vertical"
(по вертикали) или"horizontal"
(по горизонтали); значение по умолчанию —"both"
.from
— начальные размеры элемента. Указывается объект с двумя свойствами:height
иwidth
. По умолчанию используются текущие размеры элемента.origin
— позволяет указать точку исчезновения (или появления). В качестве значения указывается массив. Значение по умолчанию —["middle", "center"]
.percent
— конечный размер элемента в процентах; значение по умолчанию —0
.scale
— определяет, какие части элемента будут изменяться. Возможные значения —"both"
(каждая точка),"box"
(изменяются размеры границ и внутренние отступы) и"content"
(изменяются размеры любого содержимого элемента). Значение по умолчанию —"both"
.
$("#div1").effect("scale", {
mode: "hide", // Скрываем элемент
direction: "both", // Свертываем в точку
// Свертываем в правый верхний угол
origin: ["top","right"],
percent: 0, // Конечный размер в процентах
scale: "content"
}, 3000);
shake
— вибрация элемента по горизонтали или вертикали заданное количество раз. Рассмотрим опции эффекта.
direction
— начальное направление движения; возможные значения —"up"
(вверх),"down"
(вниз),"left"
(влево) или"right"
(вправо); значение по умолчанию —"left"
.distance
— максимальная дистанция (в пикселях); значение по умолчанию —20
.times
— количество перемещений; значение по умолчанию —3
.
$("#div1").effect("shake", {
direction: "up", // Элемент начнет движение вверх
distance: 15, // Дистанция
times: 5 // Количество перемещений
}, 500);
size
— уменьшение (или увеличение) размеров элемента. Рассмотрим опции эффекта.
from
— начальные размеры элемента. Указывается объект с двумя свойствами:height
иwidth
. По умолчанию используются текущие размеры элемента.to
— конечные размеры элемента. Указывается объект с двумя свойствами:height
иwidth
.origin
— позволяет указать точку исчезновения (или появления). В качестве значения указывается массив. Значение по умолчанию —["middle", "center"]
.scale
— определяет, какие части элемента будут изменяться. Возможные значения —"both"
(каждая точка),"box"
(изменяются размеры границ и внутренние отступы) и"content"
(изменяются размеры любого содержимого элемента). Значение по умолчанию —"both"
.
$("#div1").effect("size", {
to: { height: 0, width: 0 }, // Свертываем в точку
// Свертываем в левый нижний угол
origin: ["bottom","left"],
scale: "both"
}, 3000);
slide
— сдвигание элемента в определенную сторону или выдвигание с какой-либо стороны. Рассмотрим опции эффекта.
mode
— режим эффекта; возможные значения —"show"
(показать) или"hide"
(скрыть); значение по умолчанию —"show"
.direction
— направление движения. Если опцияmode
имеет значение"show
", то задается, с какой стороны появится элемент, а при значении"hide"
— куда он исчезнет. Возможные значения —"up"
(вверх),"down"
(вниз),"left"
(влево) или"right"
(вправо); значение по умолчанию —"left"
.distance
— позволяет указать расстояние, на которое сдвинется элемент. По умолчанию используется ширина или высота элемента (в зависимости от значения опцииdirection
).
$("#div1").effect("slide", {
mode: "hide", // Скрываем элемент
direction: "up", // Сдвигаем вверх
distance: 50 // Сдвинется на 50px вверх
}, 1000);
transfer
— трансформация одного элемента в другой. Рассмотрим опции эффекта.
className
— стилевой класс, который будет добавлен к перемещаемому элементу; по умолчанию добавляется классui-effects-transfer
.to
— ссылка на элемент (селектор jQuery), в который происходит трансформация.
Пример использования метода effect()
и эффекта transfer
приведен в листинге 12.34.
Листинг 12.34. Модуль UI Effects, эффект Transfer
<!doctype html>
<html>
<head>
<title>Модуль UI Effects, эффект Transfer</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<style>
body { font-size:10pt; font-family:Verdana, sans-serif; }
#div1 {
width:100px; height:100px;
padding:2px; border:1px solid #000000; text-align:center;
background-color:#000000; color:#ffffff;
}
#div2 {
position:absolute; top:250px; left:450px; width:50px; height:50px;
border:1px solid #000000; background-color:#0000ff;
}
.cls1 { border:1px dotted #000000; background-color:#ff0000; }
</style>
<script>
$(document).ready(function() {
$("#div1").click(function() {
$(this).effect("transfer",
{className: "cls1", to: "#div2"}, 2000);
});
});
</script>
</head>
<body>
<div id="div1">Щелкните мышью на этом блоке</div>
<div id="div2"></div>
</body>
</html>
Помощь сайту
Yandex-деньги: 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов