19.5.2. Реализация собственных анимационных эффектов

Метод animate() позволяет воспроизводить более сложные анимационные эффекты, чем методы простых эффектов. Первый аргумент метода animate() определяет воспроизводимый эффект, а остальные аргументы - параметры этого эффекта. Первый аргумент является обязательным: это должен быть объект, свойства которого задают CSS-атрибуты и их конечные значения. Метод animate() плавно изменяет CSS-свойства всех элементов от текущих их значений до указанного конечного значения. То есть эффект, воспроизводимый описанным выше методом slideUp(), можно, например, реализовать, как показано ниже:

// Уменьшить высоту всех изображений до 0

$("img").animate({ height: 0 });

Во втором необязательном аргументе методу animate() можно передать объект с параметрами эффекта:

$( "«sprite"), animate({

  opacity: .25, // Изменить непрозрачность до 0,25

  font-size: 10 // Изменить размер шрифта до 10 пикселов

 }, {

  duration: 500, // Продолжительность 1/2 секунды

  complete: function() { // Вызвать эту функцию по окончании

  this.text("До свидания"); // Изменить текст в элементе.

});

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

В самом общем случае метод animate() принимает два аргумента с объектами. Первый определяет CSS-атрибуты, которые будут изменяться, а второй - параметры их изменения. Чтобы полностью понять, как выполняются анимационные эффекты в библиотеке jQuery, необходимо поближе познакомиться с обоими объектами.