Эффекты ui

Материал из JQuery

Перейти к: навигация, поиск

Effect


Описание

.effect() является методом объекта jQuery, расширяя его стандартную функциональность. Он производит различные анимационные эффекты с выбранными элементами.

.effect(effect, [options], [speed], [callback]):jQuery

effect — имя требуемого эффекта (варианты этого параметра и подробности их использования см. ниже)
options — параметры требуемого эффекта (отличаются для разных типов эффектов, подробное описание ниже).
speed — продолжительность выполнения эффекта. Может быть задана в миллисекундах или строковым значением 'fast', 'normal' или 'slow' (200, 400 и 600 миллисекунд). По умолчанию используется 'normal'.
callback — функция, которая будет вызвана после выполнения эффекта.

Доступные эффекты

'blind' 
Сворачивает/разворачивает элементы, за счет изменения его высоты или ширины.

Параметры:

direction — определяет, как будет сворачиваться/разворачиваться элемент: горизонтально или вертикально. Доступные значения: "horizontal" и "vertical". По умолчанию "vertical".
mode — определяет, сворачивать или разворачивать элемент. Доступные значения "hide" и "show". По умолчанию "hide".
'bounce' 
Выполняет заданное количество колебаний элемента.

Параметры:

direction — направление выполнения эффекта. Доступные значения: "up", "down", "left", "right". По умолчанию "up".
mode — определяет, сворачивать или разворачивать элемент. Доступные значения "hide" и "show". По умолчанию "hide".
distance — размер колебаний. По умолчанию 20.
times — количество колебаний. По умолчанию 5.
'clip' 
Сворачивает/разворачивает элементы, за счет изменения его высоты или ширины. Отличается от blinds положением элемента при выполнении эффекта.

Параметры:

direction — определяет, как будет сворачиваться/разворачиваться элемент: горизонтально или вертикально. Доступные значения: "horizontal" и "vertical". По умолчанию "vertical".
mode — определяет, сворачивать или разворачивать элемент. Доступные значения "hide" и "show". По умолчанию "hide".
'drop' 
Скрывает/показывает элементы, за счет изменения его позиции и прозрачности.

Параметры:

direction — определяет, куда будут двигаться элементы при выполнении этого эффекта. Доступные значения: "left", "right", "up", "down". По умолчанию "left".
mode — определяет, скрывать или показывать элемент. Доступные значения "hide" и "show". По умолчанию "hide".
'explode' 
Разбивает/собирает элементы.

Параметры:

mode — определяет, скрывать (разбивать) или показывать (собирать) элемент. Доступные значения "hide" и "show". По умолчанию "hide".
pieces — количество кусочков, на которое будут разбит элемент. По умолчанию 9.
'fade' 
Скрывает элементы за счет изменения их прозрачности. Аналог метода .fadeOut() объекта jQuery. Не имеет параметров.
'fold' 
Сворачивает/разворачивает элементы (в начале по горизонтали, затем по вертикали, либо наоборот).

Параметры:

horizFirst — определяет, нужно ли в начале сворачивать/разворачивать элемент по горизонтали или нет. По умолчанию "false".
mode — определяет, скрывать или показывать элемент. Доступные значения "hide" и "show". По умолчанию "hide".
size — размер до которого будет уменьшен элемент, прежде чем исчезнуть. По умолчанию 15.
'highlight' 
Заставляет элемент страницы плавно моргнуть заданным цветом. Благодаря этому эффекту элемент можно скрыть или показать. А можно просто подсветить (например для привлечения внимания). Для этого нужно на видимом элементе вызвать highlight, не задавая параметр mode в "hide".

Параметры:

color — цвет, которым моргнет элемент. По умолчанию "#ffff99".
mode — определяет, скрывать или показывать элемент. Доступные значения "hide" и "show". По умолчанию "show".
'puff' 
Растворяет/собирает элементы страницы, за счет изменения их размеров и прозрачности.

Параметры:

percent — количество процентов, до которых будет увеличен элемент. По умолчанию 150.
mode — определяет, скрывать или показывать элемент. Доступные значения "hide" и "show". По умолчанию "show".
'pulsate' 
Выполняет заданное количество "пульсаций" элемента. Пульсации совершаются за счет изменения прозрачности элементов.

Параметры:

mode — определяет, оставить элемент в итоге скрытым или видным. Доступные значения "hide" и "show". По умолчанию "show".
times — количество колебаний. По умолчанию 5.
'scale' 
Изменяет размеры элементов. В ширину, высоту или пропорционально по обоим направлениям.

Параметры:

direction — определяет, как изменять размеры элементов. В ширину, высоту или в оба направления. Доступные значения "both", "vertical" и "horizontal". По умолчанию "both".
from — определяет размеры элемента в начальный момент выполнения анимации (обычно этим параметром не пользуются). {height: .., width: ..}
origin — расположение точки, относительно которой будут проходить изменения. По умолчанию ['middle','center']
percent — какого размера должен стать объект (в процентах). По умолчанию 0.
scale — определяет, какие области элемента будут ли растянуты/сжаты. Если нужно изменить только размер самого содержимого, следует присвоить этому параметру значение 'content', если нужно пропорционально увеличить еще и внутренние отступы (padding) то 'box', а если содержимое, отступы и границы, то следует установить параметру scale значение 'both'.
'shake' 
Производит вибрацию элемента, горизонтальную или вертикальную.

Параметры:

direction — определяет направление вибрации. Возможные значения "up", "down", "left", "right". По умолчанию "left".
distance — размах вибрации. По умолчанию 20.
times — число вибраций. По умолчанию 3.
'size' 
Изменяет размеры элементов. В ширину и высоту.

Параметры:

from — определяет размеры элемента в начальный момент выполнения анимации (обычно этим параметром не пользуются). {height: .., width: ..}.
to — размеры элемента в после выполнения анимации. {height: .., width: ..}.
origin — расположение точки, относительно которой будут проходить изменения. По умолчанию ['top','left']
scale — определяет, какие области элемента будут ли растянуты/сжаты. Если нужно изменить только размер самого содержимого, следует присвоить этому параметру значение 'content', если нужно пропорционально увеличить еще и внутренние отступы (padding) то 'box', а если содержимое, отступы и границы, то следует установить параметру scale значение 'both'.
'slide' 
Прячет элемент за пределы экрана или наоборот, возвращает его.

Параметры:

direction — направление выполнения эффекта. Доступные значения: "up", "down", "left", "right". По умолчанию "left".
mode — определяет, сворачивать или разворачивать элемент. Доступные значения "hide" и "show". По умолчанию "show".
distance — размер выполнения эффекта. По умолчанию равен ширине/высоте элемента (в зависимости от направления движения). Можно устанавливать значения, меньшие, чем значения по умолчанию.
'transfer' 
Переносит границы одного заданного элемента на другой. Очень полезный эффект, когда необходимо показать взаимодействие между элементами.

Фактически переносимый элемент обладает классом ui-effects-transfer. Зная это, можно оформлять его так, как вы захотите. Параметры:

className — optional class name the transfer element will receive.
toселектор jQuery, по которому будет выбран элемент, на который будет перенесена граница.