|
Синтаксис и описание:
Добавлено в jQuery 1.0.animate( params [, duration, easing, fn ])
Добавлено в jQuery 1.0.animate( params [, options ])
-
Функция для создания собственных анимационных эффектов, применяемых ко всем соответствующим элементам набора jQuery. Анимационные эффекты зключаются в изменении CSS-свойств от исходных (текущих) значений до конечных (заданных параметром params) в соответствии с дополнительными (необязательными) параметрами.
Параметры:
params – (объект) Объект-хеш, задающий конечные значения CSS-стилей, которые должны быть достигнуты к моменту завершения анимационного эффекта. Конечные значения свойств стиля можно задавать абсолютными величинами или смещением относительно начальных значений. Например: += (положительное смещение), -= (отрицательное смещение). Перечень поддерживаемых свойств CSS-стилей ограничивается свойствами, принимающими числовые значения (по умолчанию в пикселах px, но можно указывать также суффикс em или % для соответствующих единиц измерения. (Можно также указывать одну из предопределенных строк hide, show или toggle, например, для такого свойства как opacity.) Начиная с jQuery 1.4, в качестве значения CSS-свойства может выступать массив (см. Примечание 2).
duration – (число | строка) Необязательный параметр - продолжительность воспроизведения эффекта в милисекундах или в соответствии с предопределенным значением (slow, normal или fast). Если данный параметр имеет значение отличное от slow и fast, то непрозрачность элементов изменяется со скоростью, соответствующей значению normal (400 милисекунд). Если параметр отсутствует, то анимационный эффект не воспроизводится (изменения CSS-свойств происходят мгновенно). Начиная с jQuery 1.3, если duration имеет значение 0, то все элементы набора jQuery, переходят в свое конечное состояние синхронно (до jQuery 1.3 данная операция производилась асинхронно).
easing – (строка) Необязательный параметр – имя функции реализации перехода, осуществляющей анимационный эффект (определяющей скорость перехода в различных точках в анимации). Эти функции должны обязательно регистрироваться по имени. Они предоставляются библиотекой jQuery, например: linear – линейный переход (равномерный), swing – колебательный переход (с небольшим ускорением к концу анимации), или в виде функций подключаемых модулей (Например, JQuery UI или плагин Easing Plugin).
fn – (функция) Необязательный параметр - функция, вызываемая после окончания воспроизведения эффекта анимации (по одному разу для каждого элемента набора jQuery и только по окончанию всех анимационных эффектов, стоящих в очереди на выполнение, для данного элемента). Вызывается без параметров. Контекст this вызова функции ссылается на текущий элемент (над которым выполняется операция).
options – (объект) Объект-хеш (необязательный параметр), задающий значения параметров анимационного эффекта (свойства):
duration – (число | строка) Продолжительность воспроизведения эффекта в милисекундах или в соответствии с предопределенным значением (slow, normal или fast). По умолчанию имеет значение normal.
easing – (строка) Имя функции реализации перехода, осуществляющей анимационный эффект. По умолчанию имеет значение swing.
complete – (функция) Функция, вызываемая после окончания воспроизведения эффекта анимации. Вызывается без параметров.
step – (функция) Функция, которая будет вызываться после каждого шага анимации.
queue – (boolean – логическое значение) По умолчанию имеет значение true. Если установлено значение false, то анимация воспроизводится немедленно (без очереди), параллельно со следующим эффектом.
specialEasing – (объект) Начиная с jQuery 1.4 - Объект-хеш, определяющий одно или несколько свойств CSS и соответствующие им функции реализации перехода. Т.е. можно для разных CSS-свойств задавать разные функции реализации перехода (easing).
$('#button').click(function() {
$('#jquerybook').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce' // easeOutBounce – функция дополнительно подключаемого плагина
},
complete: function() {
$(this).after('<div>Конец анимации.</div>');
}
});
});
-
Примечание:
При указании свойств CSS в параметре params используется стиль написания составных слов camel case (горбы верблюда ), при котором несколько слов пишутся слитно без пробелов и дефисов, при этом каждое последующее слово пишется с большой буквы. Например, marginLeft вместо margin-left .
-
Примечание:
Начиная с jQuery 1.4, в параметре params в качестве значения CSS-свойства может выступать массив, первым элементом которого является само значение CSS, а вторым - имя функции реализации перехода для данного свойства. Если функция не определена в данной форме записи параметра params , то применяется значение указанное в параметре easing , либо функция swing по умолчанию.
Пример записи значения CSS-свойства в виде массива:
$('#button').click(function() {
$('#jquerybook').animate({
width: ['toggle', 'swing'],
height: ['toggle', 'swing'],
opacity: 'toggle' // Для свойства opacity будет применен линейный переход
}, 5000, 'linear', function() {
$(this).after('<div>Конец анимации.</div>');
});
});
-
Примечание:
Промежуточные значения свойств стиля вычисляются механизмом анимации автоматически в ходе воспроизведения эффекта в соответствии с функцией перехода easing и продолжительностью эффекта duration .
-
Примечание:
Каждый анимационный эффект, применяемый к элементу, добавляется в очередь для исполнения. Несколько эффектов, примененных к элементу, будут выполняться последовательно. Чтобы эффекты запускались параллельно, необходимо установить параметр queue в значение false .
-
Примечание:
JQuery UI расширяет возможности создания анимационных эффектов. (Например, с использованием нечисловых CSS-стилей, таких как цвет, или с использованием классов CSS, а не только отдельных атрибутов.)
[ наверх ]
|
|