В этой статье будет рассказываться про то, как делается анимация элемента JQuery, это очень просто, не так как на стандартном JS.
Анимация JQuery через .animate():
Собственно говоря, метод .animate(), это вообще главный метод для создания анимации и в основном вы будите пользоваться именно им.
Для того что бы делать анимацию с этим методом, нужно сначала посмотреть какие параметры он может принимать.
Примечание:
Есть две формы, обычный и расшириный, мы рассмотрим форму расшириную, так как в обычной только два параметра, это какие CSS свойства менять видs JSON объекта и продолжительность.
1 | jquery.animate({свойство1: "значение1", свойство2: "значение2"}, продолжительность) |
Параметры .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.
1 | <div id="anim"></div> |
Просто блок над которым будим работать.
1 2 3 4 5 | #anim { width: 100px; height: 100px; background-color: green; } |
Как видите у нашего блока будет ширина и высота по 100 и цвет зелёный.
1 | $("#anim").animate({width: "200px"}, {duration: 1000, easing: "linear"}); |
Как видите всё просто, вот что получилось.
До:
После:
Как видите всё очень просто и всё работает, также вы можете менять позицию и отступы, практически всё, кроме цвета элемента, но его можно менять через класс.
Вывод:
В этой статье вы узнали как делается анимация элемента JQuery, в ней я показал только один метод для работы с ней, но это только потому, что JQuery сейчас уже не популярен и в 90% случае вам хватит и этого, но если надо больше пишите в нашу группу ВК.
Подписываетесь на соц-сети:
Оценка:
Загрузка...