Метод animate - своя анимация анимация на jQuery
Метод animate позволяет создавать
анимационные эффекты для различных
CSS-свойств. Единственный обязательный параметр
- объект с CSS-свойствами, подобный тому, что
мы передаем в метод
css.
Многие свойства, имеющие нечисловые значения или несколько
значений не могут быть анимированы базовым функционалом
jQuery (например background-color). Также не всегда
поддерживаются сокращенные названия CSS-свойств, например
font - вместо этого нужно использовать fontSize или
font-size. Перед значениями можно поставить '+=' или '-=',
в таком случае значение указанное далее будет прибавлено или
вычтено из текущего значения свойства. Также вместо числовых
значений можно поставить show, hide или
toggle. Все jQuery эффекты, включая animate, можно
отключить глобально, используя настройку
jQuery.fx.off = true,
которая устанавливает значение длительности в 0.
Синтаксис
Первым параметром анимации передается объект с
CSS-свойствами и их значениями в формате
ключ: значение, которые мы собираемся
анимировать. Остальные параметры считаются
необязательными. Второй параметр - определяет
длительность анимации в миллисекундах, 400мс
по умолчанию. Третьим параметром функцию плавности
для перехода (по умолчанию это swing),
а также четвертым - callback-функция, которая
запустится после выполнения анимации:
.animate(свойства, [длительность ], [функция плавности ], [callback-функция ]);
Время можно задавать не только в миллисекундах,
но и ключевыми словами slow (600мс)
и fast (200мс), чем больше значение,
тем медленней анимация.
Можно вторым параметром передать методу различные
опции, в виде объекта JavaScript, содержащего
пары ключ: значение:
.animate(свойства, options);
Например, установим для CSS-свойств width
и height значение toggle. Длительность
на 5000мс, функции плавности передадим в виде объекта,
для ширины это будет линейная функция, а для
высоты - easeOutBounce, также по
завершению анимации у нас один раз выполнится функция
(см. ключ ⁅с⁆complete⁅/с⁆), которая после элемента с
#test разместит див с надписью 'Animation
complete.':
$('#test').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('<div>Animation complete.</div>');
}
});
Ниже в таблице приведены свойства и методы
объекта options и их описание:
| Название | Описание |
|---|---|
duration |
Длительность анимации в миллисекундах - строка или
число. 400мс по умолчанию.
|
easing |
Определяет какую функцию плавности
использовать. swing по умолчанию.
|
queue |
Булево значение или строка. true по
умолчанию. Указывает - поставить
ли анимацию в очередь. При значении false
анимация начнется незамедлительно. Если параметр
передать строкой, то анимация будет поставлена в
очередь, представленной этим параметром. При
использовании очереди с пользовательским названием,
анимация не запустится автоматически, чтобы ее
запустить - используйте ⁅с⁆dequeue('queuename')⁅/с⁆.
|
specialEasing |
Здесь вы можете передать объект, в котором ключами будут CSS-свойства, а значениями - соответствующие им функции плавности. |
step |
Функция, которая вызывается для каждого анимированного
свойства каждого анимированного элемента. Она позволяет
модифицировать Tween объект, чтобы изменить значение
свойства до того, как оно устанавливается. В качестве
параметров принимает текущее значение tween
и Tween объект.
|
progress |
Функция, вызываемая после каждого шага анимации,
только по одному разу на каждый элемент независимо
от числа анимированных свойств. Функция принимает
три параметра animation (в виде промиса),
progress (число от 0 до 1)
и remainingMs (число оставшихся миллисекунд).
|
complete |
Функция, вызываемая один раз после окончания
анимации элемента. Функция принимает
animation (в виде промиса).
|
start |
Функция, которая вызывается, когда анимация
элемента начинается. Функция принимает
animation (в виде промиса) и
jumpedToEnd (Булево значение. Если
true, то анимация автоматически
завершается).
|
done |
Функция, которая вызывается, когда анимация
элемента заканчивается (ее промис выполнен
успешно). Функция принимает
animation (в виде промиса) и
jumpedToEnd (Булево значение. Если
true, то анимация автоматически
завершается).
|
fail |
Функция, которая вызывается, когда анимация
элемента заканчивается с ошибкой (ее промис
выполнен с ошибкой). Функция принимает
animation (в виде промиса) и
jumpedToEnd (Булево значение. Если
true, то анимация автоматически
завершается).
|
always |
Функция, которая вызывается, когда анимация
элемента завершается или останавливается без
завершения (ее промис выполнен успешно или с
ошибкой). Функция принимает
animation (в виде промиса) и
jumpedToEnd (Булево значение. Если
true, то анимация автоматически
завершается).
|
Пример
Давайте при нажатии на кнопку #left, будем
сдвигать зеленый квадрат влево, а на кнопку #right
вправо на 50px, также установим длительность
на 600мс - командой slow:
<button id="left">left</button>
<button id="right">right</button>
<div class="block"></div>
div {
position: absolute;
background-color: green;
left: 50px;
width: 100px;
height: 100px;
margin: 5px;
}
$('#right').click(function() {
$('.block').animate({'left': '+=50px'}, 'slow');
});
$('#left').click(function() {
$('.block').animate({'left': '-=50px'}, 'slow');
});
Смотрите также
-
метод
show,
который плавно показывает элементы -
метод
stop,
который позволяет остановить запущенную анимацию -
метод
delay,
который устанавливает задержку выполнения событий -
свойство
jQuery.fx.off,
которое позволяет глобально отключить анимацию -
селектор
animated,
который выбирает элементы, которые в данный момент задействованы в анимации