Метод

скрывает выбранные элементы в объекте , постепенно уменьшая их высоту до 0, и затем устанавливает CSS-свойство display в значение «попе». Метод выполняет противоположные действия, чтобы сделать скрытый элемент видимым. Метод переключает состояние видимости элементов, используя методы и Каждый из этих трех методов принимает необязательные аргументы, определяющие продолжительность и функцию обратного вызова (или объект с параметрами).

Следующий пример демонстрирует использование методов из всех трех групп. Имейте в виду, что по умолчанию библиотека jQuery ставит анимационные эффекты в очередь, что обеспечивает их выполнение по очереди:

Различные расширения библиотеки jQuery (раздел 19.9) добавляют в нее дополнительные анимационные эффекты. Наиболее полный набор эффектов включает библиотека jQuery UI (раздел 19.10).

Метод

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

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

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

Во втором необязательном аргументе методу

можно передать объект с параметрами эффекта:

Вместо объекта с параметрами во втором аргументе метод

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

В самом общем случае метод

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

Первым аргументом метода

должен быть объект. Имена свойств этого объекта должны совпадать с именами CSS-атрибутов, а значения этих свойств должны определять конечные значения атрибутов, которые должны быть получены к окончанию эффекта. Участвовать в анимационном эффекте могут только атрибуты с числовыми значениями: невозможно реализовать плавное изменение значения цвета, шрифта или свойств-перечислений, таких как . Если значением свойства является число, подразумевается, что оно измеряется в пикселах. Если значение является строкой, в ней можно указать единицы измерения. Если единицы измерения отсутствуют, опять же предполагается, что значение измеряется в пикселах. Чтобы указать относительные значения, в строковые значения следует добавить префикс: «+=» - для увеличения и «-=» - для уменьшения значения. Например:

Обратите внимание на кавычки, окружающие имя свойства «margin-left» в примере литерала объекта выше. Наличие дефиса в имени этого свойства делает его недопустимым идентификатором в языке JavaScript, поэтому в подобных случаях следует использовать кавычки. Разумеется, библиотека jQuery позволяет также использовать альтернативные имена со смешанным регистром символов, такие как

.

Помимо числовых значений (с необязательными единицами измерения и префиксами «+=» и «-=») существует еще три значения, которые можно использовать в объектах, определяющих изменяемые свойства. Значение «hide» сохранит текущее значение указанного свойства и затем плавно изменит его до 0. Значение «show» плавно изменит значение CSS-свойства до его сохраненного значения. При использовании значения «show» библиотека jQuery вызовет метод

по завершении эффекта. А при использовании значения «hide» она вызовет метод