Методы анимации, которые мы до сих пор обсуждали, являются рационализированными способами вызова метода .animate() для разных частных случаев. Сам же метод  .animate() способен анимировать большинство CSS-свойств элемента и может принимать в качестве одного из параметров так называемую функцию изинга (easing), определяющую способ выполнения анимационного перехода. По умолчанию поддерживаются строковые параметры изинга "linear" и "swing", но для jQuery доступны и другие функции изинга в виде легко подключаемых дополнений (более подробно о дополнениях говорится далее).
Метод .animate() может принимать несколько аргументов, для передачи которых существует два способа. Первый способ предполагает передачу набора анимируемых CSS-свойств в формате JSON в качестве первого аргумента, а также трех дополнительных аргументов, каждый из которых не является обязательным: длительности анимации (в миллисекундах), формулы, описывающей функцию изинга, и функции обратного вызова. Второй способ предполагает передачу набора CSS-свойств в формате JSON в качестве первого аргумента и набора параметров в формате JSON в качестве второго аргумента.

 
Используем первый способ вызова метода .animate(), чтобы установить фон и стиль рамки абзаца с идентификатором bar, а затем анимировать ширину и высоту этого абзаца на протяжении 5 секунд с использованием изинга типа "swing" с последующим выводом сообщения после завершения анимации с помощью такого кода.

 $("#bar")
    .css({
            "background":"yellow",
            "border":"1px solid black"
        })
    .animate({
            "width":"500px",
            "height":"100px"
        },
        5000,
        "swing",
        function(){
                console.log("Анимация завершена!");
            });

После выполнения этого кода абзац отобразится на желтом фоне в черной рамке, а его размеры изменятся в соответствии с переданными параметрами (рис- 2.21).

Рис. 2.21. Вид абзаца по окончании процесса анимации его ширины и высоты

 
При использовании второго способа вызова метода animate () соответствующий код выглядел бы следующим образом.

$("#bar")
    .css({
            "background":"yellow",
            "border":"1px solid black"
        })
    .animate({
            "width":"500px",
            "height":"100px"
        },
        {
            "duration":5000,
            "easing":"swing",
            "complete":function(){
                console.log("Анимация завершена!");
            }
        });

Результат выполнения этого кода будет таким же. Второй формат передачи параметров методу animate() предоставляет дополнительные возможности. Для выполнения тех же действий, но с использованием всех доступных возможностей, можно было бы применить код наподобие следующего.

$("#bar")
    .css({
            "background":"yellow",
            "border":"1px solid black"
        })
    .animate({
            "width":"500px",
            "height":"100px"
        },
        {
            "duration":5000,
            "easing":"swing",
            "complete":function(){
                    console.log("Анимация завершена!");
                },
            "step":function(){
                    console.log("Шаг завершен!");
                },
            "queue":true,
            "specialEasing":{
                    "width":"linear"
                }
        });

 Параметр step позволяет разработчику создать функцию, которая будет запускаться по завершении каждого этапа анимации. Это происходит при любом изменении свойства, поэтому в консоли отобразится довольно много сообщений "Шаг завершен!".

 
Параметр  queue указывает, должна ли анимация включаться в текущую очередь, т.е. позволяет задать порядок вызова анимаций. В случае вызова нескольких анимаций и помещения их в очередь вторая анимация начнется лишь после того, как закончится первая, третья — лишь после того, как закончится вторая, и т.д.

 
Параметр specialEasing позволяет присоединять к каждому из анимируемых CSS-свойств различные стили изинга.