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

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

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

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

$("p").animate({
  "margin-left": "+=.5in", // Увеличить отступ абзаца
  opacity: "-=.1" // Уменьшить непрозрачность
});

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

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

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

$("img").animate({ width: "hide",
  borderLeft: "hide",
  borderRight: "hide",
  paddingLeft: "hide",
  paddingRight: "hide"
});

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

Оглавление книги