Использование CSS свойств при анимации

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

Вы также можете добавлять строки «show», «hide» и «toggle» к любым свойствам. Давайте взглянем не небольшой пример, иллюстрирующий использование функции animate(). Помните, что вы должны размещать любые jQuery скрипты внутри функции, отвечающей за готовность документа: jQuery(function(){//code here}); Это необходимо для того, чтобы jQuery выполнялся после окончательной загрузки DOM.

...
jQuery('.post p').animate({ fontSize: '140%',
  border: '1px solid #ff6600',}, 3000);
...

Указанный сниппет позволяет анимировать все теги p, обладающие классом .post. В данном случае мы увеличиваем размер шрифта и добавляем границы.

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

CSS свойства не работают?

На всякий случай напомню читателям, что свойства, передаваемые в функции css() и animate(), должны быть представлены в верблюжьем регистре (также известном как «горбатый регистр» и «стиль верблюда»). Таким образом, вместо свойства padding-bottom необходимо будет передавать paddingBottom, а вместо margin-right — marginRight.