Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Настройки анимации
В параметре <Объект с опциями>
можно указать объект со следующими свойствами:
duration
— время выполнения анимации. Можно указать значение в миллисекундах или значения"fast"
(200
миллисекунд) и"slow"
(600
миллисекунд). Значение по умолчанию:400
миллисекунд. Пример указания1000
миллисекунд:
<p>Абзац</p>
<input type="button" value="Отобразить или скрыть элемент"
id="btnStart">
<input type="button" value="Остановить анимацию"
id="btnStop">
<input type="button" value="Остановить и завершить"
id="btnStopEnd">
<div id="log"></div>
$('#btnStart').click( function() {
$('p').toggle({
duration: 1000
});
});
$('#btnStop').click( function() {
$('p').stop();
});
$('#btnStopEnd').click( function() {
$('p').stop(true, true);
});
easing
— закон анимации. Можно указать значения"swing"
(значение по умолчанию) и"linear"
(равномерное изменение на всем протяжении действия). Пример указания значения"linear"
:
$('#btnStart').click( function() {
$('p').toggle({
duration: 1000,
easing: 'linear'
});
});
specialEasing
— позволяет задать разные законы анимации (свойствоeasing
) для каждого атрибута стиля отдельно. В качестве значения указывается объект с названием атрибута стиля и названием закона анимации:
$('#btnStart').click( function() {
$('p').toggle({
duration: 1000,
specialEasing: {
width: 'swing',
height: 'linear'
}
});
});
complete
— содержит ссылку на функцию, которая будет вызвана после окончания анимации. Внутри функции обратного вызова доступен указательthis
на текущий DOM-элемент. Пример:
$('#btnStart').click( function() {
$('p').toggle({
duration: 400,
easing: 'linear',
complete: function() {
console.log('Анимация завершена');
}
});
});
queue
— если указано значениеtrue
(значение по умолчанию), то анимация будет добавлена в очередь анимаций с названием"fx"
. Если указано значениеfalse
, то анимация будет выполнена сразу без добавления в очередь. Создадим очередь из двух анимаций и выведем в консоль количество анимаций в очереди:
$('#btnStart').click( function() {
$('p').toggle({
queue: true,
complete: function() {
console.log('Анимация завершена');
}
}).slideToggle();
console.log( $('p').queue('fx').length ); // 2
});
В качестве значения можно указать строку с названием очереди. Для запуска анимации в этом случае нужно вызвать метод dequeue()
с названием очереди:
$('#btnStart').click( function() {
$('p').toggle({
queue: 'myQueue',
complete: function() {
console.log('Анимация завершена');
}
}).dequeue('myQueue');
});
step
— задает ссылку на функцию, которая будет вызываться на каждом шаге анимации для каждого атрибута по отдельности перед установкой значения. Формат функции:
function <Название функции>(Number now, Tween tween) {
// ...
}
Через параметр now
доступно текущее значение шага (вещественное число от 0
до 1
), а через второй параметр — объект Tween
с настройками анимации:
$('#btnStart').click( function() {
$('p').toggle({
duration: 5000,
step: function(now, tween) {
$('#log').text(now);
console.log(tween);
}
});
});
В окне консоли отобразится множество строк, аналогичных этой:
Object { elem: <p>, prop: "width", easing: "swing",
options: Object, now: 1270.007946016786,
start: 1272, end: 0, unit: "px",
pos: 0.0015660801754825981 }
start
— задает ссылку на функцию, которая будет вызываться перед началом анимации. Формат функции:
function <Название функции>(Deferred animation) {
// ...
}
progress
— задает ссылку на функцию, которая будет вызываться после каждого шага анимации. Формат функции:
function <Название функции>(Deferred animation, Number progress,
Number remainingMs) {
// ...
}
done
— задает ссылку на функцию, которая будет вызываться после завершения анимации. Формат функции:
function <Название функции>(Deferred animation,
Boolean jumpedToEnd) {
// ...
}
fail
— задает ссылку на функцию, которая будет вызываться при ошибке или отмене анимации. Формат функции:
function <Название функции>(Deferred animation,
Boolean jumpedToEnd) {
// ...
}
always
— задает ссылку на функцию, которая будет вызываться после завершения анимации или при отмене. Формат функции:
function <Название функции>(Deferred animation,
Boolean jumpedToEnd) {
// ...
}
Параметр jumpedToEnd
будет содержать значение true
, если анимация была отменена и сразу завершена, при этом объект находится в конечном состоянии. Пример:
$('#btnStart').click( function() {
$('p').toggle({
duration: 1000,
start: function(animation) {
console.log('start');
},
progress: function(animation, progress, remainingMs) {
console.log('progress ' + progress);
},
done: function(animation, jumpedToEnd) {
console.log('done ' + jumpedToEnd);
},
fail: function(animation, jumpedToEnd) {
console.log('fail ' + jumpedToEnd);
},
always: function(animation, jumpedToEnd) {
console.log('always ' + jumpedToEnd);
},
complete: function() {
console.log('Анимация завершена');
}
});
});
При запуске анимации процесс будет выглядеть так:
start
progress 0.016000000000000014
progress 0.028000000000000025
…
progress 0.96
progress 0.966
progress 1
done undefined
Анимация завершена
always undefined
Если при выполнении анимации нажать кнопку Остановить анимацию, то последовательность будет другой:
start
progress 0.016000000000000014
progress 0.028000000000000025
…
progress 0.398
progress 0.41800000000000004
fail undefined
always undefined
Если при выполнении анимации нажать кнопку Остановить и завершить, то последовательность будет такой:
start
progress 0.016000000000000014
progress 0.028000000000000025
…
progress 0.48
progress 0.494
progress 1
done true
Анимация завершена
always true
Помощь сайту
ЮMoney (Yandex-деньги): 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов