Jquey функция animate () выполняет определенную анимацию на заданном наборе элементов. Анимация происходит за счет плавного изменения их CSS-свойств. Функция имеет два варианта использования:
1).animate (properties, [duration], [easing], [callback])
где
properties – список CSS-свойств, участвующих в анимации и их конечных значений. (см. описание ниже)
duration – продолжительность выполнения анимации. Может быть задана в миллисекундах или строковым значением ’fast’ или ’slow’ (200 и 600 миллисекунд).
easing – изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). (см. описание ниже)
callback – функция, которая будет вызвана после завершения анимации.
2).animate (properties, options)
где
properties – список CSS-свойств, участвующих в анимации и их конечных значений. (см. описание ниже)
options – дополнительные опции. Должны быть представлены объектом, в формате опция: значение.
Варианты опций:
duration – продолжительность выполнения анимации (см. выше).
easing – изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускориться). (см. описание ниже)
complete – функция, которая будет вызвана после завершения анимации.
step – функция, которая будет вызвана после каждого шага анимации.
queue – булево значение, указывающее, следует ли помещать текущую анимацию в очередь анимаций. В случае false (по-умолчанию), анимация будет запущена сразу же, не вставая в очередь. Иначе она будет ждать завершения предыдущей анимации, стоящей в очереди.
specialEasing – позволяет установить разные значения easing, для разных CSS-параметров. Задается объектом, в формате параметр: значение.
Пример – изменение группы css-свойств по клику на кнопку: