JavaScript. Подробное руководство, 6-е издание, стр. 313

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

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

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

<b>animate()</b>
можно передать объект с параметрами эффекта:

<b>$( &quot;«sprite&quot;), animate({</b>

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

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

<b> }, {</b>

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

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

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

<b>});</b>

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

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

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

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

19.5.2.1. Объект, определяющий изменяемые атрибуты

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

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

<b>$(&quot;p&quot;).animate({</b>

<b>  &quot;margin-left&quot;: &quot;+=.5in&quot;, // Увеличить отступ абзаца</b>

<b>  opacity: &quot;-=.1&quot; // Уменьшить непрозрачность</b>

<b>});</b>

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

<b>marginLeft</b>
.

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

<b>show()</b>
по завершении эффекта. А при использовании значения «hide» она вызовет метод
<b>hide().</b>

Можно также использовать значение «toggle», которое обеспечит увеличение («show») или уменьшение («hide») значения атрибута в зависимости от его текущего состояния. Например, ниже показано, как можно реализовать эффект «slide-Right» сворачивания вправо (подобный эффекту сворачивания вверх, воспроизводимому методом

<b>slideUp(),</b>
но изменяющий ширину элемента):

<b>$(&quot;img&quot;).animate({ width: &quot;hide&quot;,</b>

<b>  borderLeft: &quot;hide&quot;,</b>

<b>  borderRight: &quot;hide&quot;,</b>

<b>  paddingLeft: &quot;hide&quot;,</b>

<b>  paddingRight: &quot;hide&quot;</b>

<b>});</b>

Замените значения свойств на «show» или «toggle», чтобы получить эффект разворачивания по горизонтали, аналогичные тем, что воспроизводятся методами

<b>slideDown()</b>
и
<b>slideToggle()</b>
.

19.5.2.2. Объект с параметрами анимационного эффекта

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

<b>animate()</b>
может передаваться объект с параметрами анимационного эффекта. Вы уже знакомы с двумя наиболее важными параметрами. Значением свойства
<b>duration</b>
может быть число, определяющее длительность эффекта в миллисекундах, а также строка «fast», «slow» или любая другая, объявленная в свойстве
<b>jQuery.fx.speeds</b>
.

Другим параметром, с которым вы уже встречались, является свойство

<b>complete</b>
: оно определяет функцию, которая должна быть вызвана по окончании эффекта. Похожее свойство
<b>step</b>
определяет функцию, которая должна вызываться для каждого шага или кадра анимации. Элемент, к которому применяется эффект, передается этой функции в виде значения ссылки
<b>this</b>
, а текущее значение изменяемого свойства - в первом аргументе.

Свойство

<b>queue</b>
объекта с параметрами определяет - должен ли данный эффект ставиться в очередь. То есть должно ли откладываться воспроизведение данного эффекта до окончания всех предыдущих эффектов. По умолчанию все анимационные эффекты ставятся в очередь. Если свойству
<b>queue</b>
присвоить значение false, эффект не будет поставлен в очередь. Воспроизведение таких внеочередных эффектов начинается немедленно. Последующие анимационные эффекты, которые ставятся в очередь, не будут ждать завершения внеочередных эффектов. Рассмотрим следующий пример: