Эффекты

В параметре <Эффект> метода 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>

Библиотека jQuery UI