Керівництво по методу jquery animate ()

jQuery animate () - метод-оболонка, тобто працює з заздалегідь обраним набором елементів DOM, обгорнутих jQuery. Метод дозволяє застосовувати необхідні ефекти анімації до елементів в наборі. Здійснення вищесказаного на практиці робиться можливим завдяки наявності набору властивостей CSS і значень, які ці властивості візьмуть по завершенні виконання анімацій. Проміжні значення, які стиль матиме після досягнення бажаного ефекту (автоматично контрольовані анімаційним движком), визначаються тривалістю ефекту і функцією-easing; дві ці опції будуть розглянуті нижче.

Список піддаються анімації властивостей CSS обмежується тими, які можуть приймати чисельні значення. Значення можуть бути абсолютними (наприклад 200), або відносними. При абсолютних значення за замовчуванням одиниця jQuery - пікселі. Ми також можемо використовувати специфічні одиниці: em, rem або відсотки. Щоб задати відносні значення використовуються префікси + = або - =; префікси направляють цільове відносне значення в позитивному або негативному напрямі, відповідно.

Параметри і сигнатура методу animate ()

Метод має дві основні форми; більшість використовуваних параметрів необов'язкові (укладені в квадратні дужки).

• animate (properties [, duration] [, easing] [, callback])
• animate (properties [, options])

• properties (Об'єкт): список css-властивостей, що містить досягаються в кінці анімації значення.
• duration (Число | Рядок): тривалість ефекту в мілісекундах або одна з заздалегідь встановлених рядків: "slow" (600ms), "normal" (400ms), або "fast" (200ms). Значення за замовчуванням - "normal".
• easing (Рядок): Використовується при переході (transition) ім'я функції-easing (яка визначає зміну швидкості анімації). Значення за замовчуванням "swing".
• callback (Функція): Функція, виконувана по завершенні анімації для кожного анімованого елементу.
• options (Об'єкт): об'єкт, що містить набір властивостей (додаткові опції), які будуть передані методу. В наявності є таке властивості:
  • always (Функція): функція, що викликається по завершенні анімації або коли виконанні анімації зупиняється (але не завершується).
  • complete (Функція): виконується функція по завершенні анімації.
  • done (Функція): викликається по завершенні анімації функція.
  • duration (Рядок | Число): описана вище.
  • easing (Рядок): описана вище.
  • fail (Функція): виповнюється при невдалій спробі анімації.
  • progress (Функція): Виконується після кожного кроку анімації. Викликається один раз для кожного елемента після виконання його анімації.
  • queue (Boolean): коли анімацію треба помістити в чергу ефектів / функцій (effects queue (подробиці нижче). Значення за замовчуванням - true.
  • specialEasing (Об'єкт): об'єкт, параметрами якого є css-властивості, чиїми значеннями є функції-переходу
  • start (Функція): виконується, коли анімації починає відбуватися.
  • step (Функція): функція, яка викликається для кожного анімованого властивості кожного анімованого елементу.

Термін easing використовується для опису способу, який керує обробкою і задає швидкість кадрів анімації. Анімація виповнюється послідовно, якщо опція queue задана як true. і паралельно (без черги) - якщо як false.

Приклади використання методу animate ()

Застосуємо цей метод на практиці. Зауважу, що при виконанні анімацій складного порядку, створених цим методом, можуть виникнути помилки. Тобто для дуже складних анімацій цей метод краще уникати.

одиночна анімація

Створити одиночну анімацію гранично просто, достатньо одного виклику. Наприклад, потрібно пересунути елемент з одного боку блоку до іншого. Щоб проілюструвати цю анімацію, створимо два div елемента, один всередині іншого. Стиль наступний: фон внутрішнього div - червоний. код:

Застосуємо animate () і пересунемо маленький квадрат з однієї сторони до іншої:

Анімується тільки властивість left. Тривалість анімації - заздалегідь задане значення slow (600мс). внутрішній