Метод .animate()

Метод виконує анімацію, налаштовану за допомогою властивостей CSS.

.animate( properties, [ duration ], [ easing ], [ callback ] )

  • properties — Об'єкт із властивостями CSS, згідно з якими виконуватиметься анімація.
  • duration — Рядок або число, що визначає тривалість анімації.
  • easing - Рядок, що визначає функцію управління швидкістю анімації.
  • callback — функція, що викликається після виконання анімації.

Метод з'явився у jQuery 1.0.

.animate( properties, options )

  • properties — Об'єкт із властивостями CSS, згідно з якими виконуватиметься анімація.
  • options — Додаткові параметри анімації. Підтримуються опції:
  • Тривалість: Рядок або число, що визначає тривалість анімації.
  • easing: Рядок, що визначає функцію управління швидкістю анімації.
  • complete: Функція, що викликається після виконання анімації.
  • step: Функція після кожного кроку анімації.
  • queue: Прапор типу Boolean, що задає необхідність розміщення анімації в чергу ефектів jQuery. Якщо цей прапор дорівнює false , то анімація почнеться негайно.
  • SpecialEasing: Об'єкт з однієї або більше властивостей CSS, у відповідність до кожної властивості CSS ставиться власна функція управління швидкістю зміни цієї властивості (опція додана в jQuery 1.4).

Метод з'явився у jQuery 1.0.

Метод .animate() дозволяє створювати ефекти анімації для будь-яких числових властивостей CSS. Єдиним обов'язковим параметром є об'єкт із властивостями CSS. Цей об'єкт схожий на той самий об'єкт, що передається в метод .css() , за винятком того, що набір властивостей дещо обмежений.

Усі анімовані властивості повинні задаватися у вигляді окремого числового значення (завинятком властивостей, описаних нижче); нечисловые властивості неможливо знайти анімовані з допомогою базового функціоналу jQuery. (Наприклад, властивості width, height або left можуть бути анімовані, але властивість background-color не може. Існують окремі плагіни для анімації таких властивостей, як color, background-color, border-color). Значення властивостей без одиниць виміру трактуються як кількість пікселів. Одиниці виміру em і % можуть вказуватися тільки в тих випадках, коли це застосовно.

Скорочені властивості CSS (наприклад, margin, background, border) не підтримуються. Наприклад, якщо вам необхідно зробити анімацію властивості margin, то потрібно вказати кожну з окремих властивостей:

На додаток до числових значень кожна властивість може бути задана у вигляді рядка 'show', 'hide' або 'toggle'. Ці ключові слова дозволяють робити анімацію із прихованням та відображенням елемента, враховуючи вихідне значення властивості display .

Значення властивостей, що анімуються, також можуть бути відносними. Якщо перед числовим значенням додати послідовність символів += або -=, то кінцеве значення властивості буде обчислено додаванням або відніманням зазначеного числа з поточного значення властивості.

Тривалість анімації

Тривалість вказується у мілісекундах; що більше значення, то повільніше анімація. Також допустимі строкові значення 'fast' та 'slow', які відповідають тривалості 200 та 600 мілісекунд.

Виклик функції після завершення анімації

Якщо вказано функцію зворотного виклику (callback function), вона виконується відразу після завершення анімації. Це може бути корисним для послідовного запуску декількох анімацій. У цю функцію зворотного виклику не передаються будь-які аргументи, але змінна thisмістить посилання на елемент DOM, над яким виконується анімація. Якщо одночасно анімується кілька елементів, важливо розуміти, що функція зворотного виклику здійсниться один раз після завершення анімації кожного елемента, а не всієї анімації в цілому.

Можна анімувати будь-який елемент, наприклад, зображення:

У прикладі нижче в процесі анімації змінюється прозорість (opacity), зсув зліва (left) і висоту (height) зображення одночасно:

анімації
Зверніть увагу, що ми вказали рядок 'toggle' як значення властивості height . Так як перед анімацією зображення було мабуть, то анімація стисне його по вертикалі, зменшивши висоту до 0 і приховає його. Після наступного натискання елемента з ID #clickme , висота зображення повернеться у вихідний стан:

метод

Прозорість зображення вже дорівнює цільовому значенню, тому вона не анімується за другим кліком. Оскільки ми вказали значення властивості left щодо, то зображення за кожної наступної анімації зрушується вправо зазначене значення.

Властивість position у елемента не повинно бути рівним значенням static, якщо необхідно виконати анімацію властивості left, right і т.п.