Анимация на JQuery

Метки: / /

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

Анимация JQuery через .animate():

Собственно говоря, метод .animate(), это вообще главный метод для создания анимации и в основном вы будите пользоваться именно им.

Для того что бы делать анимацию с этим методом, нужно сначала посмотреть какие параметры он может принимать.

Примечание:

Есть две формы, обычный и расшириный, мы рассмотрим форму расшириную, так как в обычной только два параметра, это какие CSS свойства менять видs JSON объекта и продолжительность.

Параметры .animate():

  • {свойство1: «значение1», свойство2: «значение2»} — CSS Свойства которые нужно плавно изменить;
  • duration — Определяет продолжительность анимации в миллисекундах;
  • easing — Определяет тип анимации, то есть на сколько она плавная и т.д, например linear линейный переход, то есть скорость что в начале, что в конце одинаковая (Нужен JQuery UI);
  • queue — Очередь анимации, по умолчанию true, false, анимация запускается сразу;
  • step — Определяет функцию, которая будет вызываться после каждого этапа анимации;
  • progress — Функция для вызова после каждой анимации;
  • complete — Функция которая будим вызываться по окончанию анимации;
  • start — Функция которая будет вызываться в начале анимации;
  • done — Функция которая будим вызываться по окончанию анимации;
  • fail — Функция вызывается если анимацию завершить не возможно;
  • always — Функция которая будет вызываться, если анимация проигралась не до конца;

Как видите параметров очень много, при этом по сути метод принимает только два параметра, первый это свойства виде JSON объекта и второй JSON объект со всеми остальными параметрами, при этом в основном вы будите использовать только первые 4 параметра.

Вот как будет выглядеть использование этой функции, но сначала сделаем CSS и HTML.

Просто блок над которым будим работать.

Как видите у нашего блока будет ширина и высота по 100 и цвет зелёный.

Как видите всё просто, вот что получилось.

До:

До применения jquery animate function

После:

Применение jquery animate width

Как видите всё очень просто и всё работает, также вы можете менять позицию и отступы, практически всё, кроме цвета элемента, но его можно менять через класс.

Вывод:

В этой статье вы узнали как делается анимация элемента JQuery, в ней я показал только один метод для работы с ней, но это только потому, что JQuery сейчас уже не популярен и в 90% случае вам хватит и этого, но если надо больше пишите в нашу группу ВК.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую: