.animate() метод

Методът изпълнява анимация, конфигурирана чрез CSS свойства.

.animate( свойства, [продължителност], [облекчаване], [обратно извикване])

свойства — Обект с CSS свойства, според който ще се изпълнява анимацията.
продължителност — Низ или число, указващо продължителността на анимацията.
easing - Низ, който дефинира функцията за контрол на скоростта на анимацията.
callback - Функция, извикана след завършване на анимацията.

Методът се появи в jQuery 1.0.

.animate( свойства, опции)

свойства — Обект с CSS свойства, според който ще се изпълнява анимацията.
опции — Обект за допълнителни опции за анимация. Поддържани опции:

продължителност: Низ или число, указващо продължителността на анимацията.
easing: Низ, който дефинира функцията за контрол на скоростта на анимацията.
завършено: Функцията, която трябва да бъде извикана след завършване на анимацията.
стъпка: Функция, която да се извиква след всяка стъпка на анимация.
опашка: Булев флаг, който указва дали да се постави анимацията в опашката за ефекти на 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'. Тези ключови думи позволяват на анимацията да показва и скрива елемент, като се има предвид първоначалната стойност на свойството за показване.

Стойностите на анимираните свойства също могат да бъдат относителни. Ако се добави последователност от знаци += или -= преди числова стойност, крайната стойност на свойството ще бъде изчислена чрез добавяне или изваждане на определеното число от текущата стойност на свойството.

Продължителност на анимацията

Продължителността е посочена в милисекунди; колкото по-голяма е стойността, толкова по-бавна е анимацията. Също така валидните стойности на низа са 'бързо' и 'бавно', които съответстват на продължителност от 200 и 600 милисекунди.

Извикване на функция след завършване на анимацията

Ако е зададена функция за обратно извикване, тя се изпълнява веднага след края на анимацията. Това може да бъде полезно за изпълнение на множество анимации последователно. Към тази функция за обратно извикване не се предават аргументи, а тази променливасъдържа препратка към DOM елемента, който се анимира. Ако няколко елемента се анимират едновременно, важно е да се разбере, че функцията за обратно извикване ще бъде изпълнена веднъж, след като всеки елемент приключи анимирането, а не анимацията като цяло.

Можете да анимирате всеки елемент, например изображение:

В примера по-долу процесът на анимация променя прозрачността (opacity), преместването наляво (levo) и височината (height) на изображението едновременно:

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

Прозрачността на изображението вече е на целевата стойност, така че не се анимира при второ щракване. Тъй като уточнихме относително стойността на свойството ляво, изображението се измества надясно със зададената стойност с всяка следваща анимация.

Свойството позиция на елемента не трябва да се задава на статично, ако е необходимо да се анимират свойствата left , right и т.н.