Kwork.ru - услуги фрилансеров от 500 руб.

Использование 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.

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.