Эффекты

В параметре <Эффект> метода 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
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF

Помощь сайту

Yandex-деньги: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

Поиск по сайту в Яндексе