Функція, яка викликається в будь-якому випадку - або при завершенні анімації, або при її скасування без виполененія. (Долучення в версії: 1.8)
Метод .animate () дозволяє створити ефект анімації на будь-числове CSS властивість елемента. Єдиним необхідним параметром є об'єкт з CSS властивостями. Цей об'єкт схожий на той що передається в метод .css (). за винятком того, що діапазон властивостей більш обмежений.
Анімаційні властивості і значення
Всі анімаційні властивості повинні бути анімовані за допомогою одиничного числового значення. за винятком випадків зазначених нижче; більшість не числових властивостей не можуть бути анімовані за допомогою базового функціоналу jQuery (Наприклад width. height або left можуть бути анімовані, але background-color не може, за винятком використання плагіна jQuery.Color). Значення властивостей розглядаються як кількість пікселів, якщо не вказано інше. Одиниці виміру em і% можуть бути вказані, там де це може бути застосовано.
На додаток до властивостей стилю, деякі не стильові свойстваs, такі як scrollTop і scrollLeft. а також призначені для користувача властивості, можуть бути анімовані.
Скорочені CSS властивості (такі як font, background, border) в повному обсязі підтримуються. Наприклад, якщо Ви хочете анімувати ширину кордонів, то стиль і початкова ширина кордону повинні бути задані заздалегідь. Або, якщо Ви хочете анімувати розмір шрифту, Ви повинні використовувати fontSize або CSS еквівалент 'font-size' а не просто 'font'.
На додаток до числовим значенням, кожне властивість може прийняти рядок: 'show'. 'Hide' або 'toggle'. Ці скорочення дозволяються вам довільну анімацію приховування або відображення, яка враховує тип відображення елемента. Для того щоб використовувати вбудоване відстеження стану відображення властивості, рядок 'toggle' повинна бути задана в якості значення аніміруемого CSS властивості.
Анімовані властивості також можуть бути відносними. Якщо значення задано з провідною послідовністю символів + = або - =. то цільове значення обчислюється шляхом додавання або віднімання заданого числа від поточного значення властивості.
Важливо: На відміну від скорочених методів анімації, таких як .slideDown () і .fadeIn (). метод .animate () робить приховування елементу як частина ефекту. Наприклад, в разі $ ( "someElement") .hide (). Animate (, 500). анімація буде запущена, але елемент буде залишатися прихованим.тривалість
Тривалість задається в мілісекундах. Більш високі значення означає більш повільну анімацію, а не швидку. Значення за замовчуванням 400 мілісекунд. Рядки 'fast' і 'slow' можуть бути використані для вказівки тривалості 200 і 600 мілісекунд відповідно.
Функції зворотного виклику
Якщо задані start. step. progress. complete. done. fail і always функції зворотного виклику, то вони будуть викликані для кожного аніміруемого елемента; this в цих функціях буде вказувати на аніміруемий DOM-елемент. Якщо у вибірці немає елементів, то функції зворотного виклику не виконуватимуться. Якщо анімуються кілька елементів, то зворотний виклик виконується один раз для кожного елемента, а не один раз для анімації в цілому. Використовуйте метод .promise () для отримання об'єкта Promise і прикріплення функцій зворотних викликів.
базове використання
Анімація будь-якого елементу, наприклад просте зображення:
Зверніть увагу, що цільове значення властивості height одно 'toggle'. Так як зображення було видно перш, анімація скорочує висоту до 0 щоб приховати його. Друге натискання потім зверне цей перехід:
Властивість opacity картинки вже одно його цільового значення, так що це властивість не анімується при другому кліці. Так як значення властивості left є відносним значенням, то картинка зсувається далі направо під час другої анімації.
Властивості напрямків (top. Right. Bottom. Left) не мають ніякого помітного впливу на елементи, якщо їх властивість position установленно в значення static (значення за замовчуванням).
Важливо: бібліотека jQuery UI розширює метод .animate () дозволяючи анімувати деякі нечислові властивості, наприклад колірні властивості. jQuery UI також включає механізм для вказівки специфічних анімацій через CSS класи, а не окремі атрибути.
Важливо: якщо намагатися анімувати елемент з висотою або шириною рівній 0px, де вміст елемента показується через переповнення (overflow), jQuery може обрізати переповнення під час анімації. Активуючи розміри вихідного елемента, захованого до анімації, можна гарантувати, що анімація пройде гладко. clearfix може бути використаний для автоматичного виправлення розмірів вашого основного елемента без необхідності встановлювати їх вручну.
крокова функція
Друга версія методу .animate () надає опцію step - функцію зворотного виклику, яка викликається на кожному кроці анімації. Ця функція корисна для включення довільних типів анімацій або зміни анімації, в момент її виконання. Вона приймає два аргументи (now і fx), а також this вказує на аніміруемий DOM-елемент.
- now. числове значення аніміруемого властивості на кожному кроці
- fx. ссидка на прототип об'єкта jQuery.fx. який містить ряд властивостей, таких як elem для аніміруемого елемента, start і end для першого і останнього значення аніміруемого властивості соотвественно і prop для аніміруемого властивості.
Зверніть увагу що функція step викликається для кожного аніміруемого властивості на кожному аніміруемом елементі. Наприклад, дані два списки, функція step викликається чотири рази на кожен крок анімації: