JQuery за начинаещи

Продължаваме да учим jQuery. Преминаване към ефектите ...

Тази статия е включена в урок за jQuery за начинаещи. Урокът се разпространява безплатно и е придружен от интерактивни примери.

Исках да напиша огромна статия за ефектите, с примери за тази или онази анимация, но се оказа по-скоро бележка, която ще ви помогне да разберете същността на ефектите в jQuery

Не забравяйте - всички анимационни ефекти на jQuery се въртят около функция. анимира - тази функция приема едно или няколко CSS свойства на елемента и ги променя от първоначалното към крайното в N-ти брой итерации (броят на итерациите зависи от определеното време, но поне една итерация за 13 ms (ако I са изкопали тази стойност правилно)).

Функцията за анимация приема следните параметри:

параметри - описание на CSS свойствата на елемента, към който ще се появи анимацията (т.е. имаме div с височина 100px - казваме animate () - и височината плавно се променя на 200px)
продължителност - скорост на анимация - зададена в милисекунди или използваща ключови думи „бързо“ = 200 ms, „нормално“ = 400 ms или „бавно“ = 600 ms
облекчаване - посочваме коя функция ще използваме, за да увеличим стойностите, да изберем „линейна“ или „люлка“ (ако искате повече, вижте приставката за облекчаване)
обратно извикване - функция, която ще бъде извикана след края на анимацията

Алтернативен метод за инициализация:

параметри - описание на CSS свойствата на елемента, към който ще се появи анимацията
настроики - обект за настройки:
- продължителност - вижте по-горе
- облекчаване - виж по-горе
- завършен - подобно на описания по-рано параметър за обратно извикване
- стъпка - друга функция за обратно извикване - отговаря за промяна на параметрите стъпка по стъпка - пример по-долу
- queue - флаг на опашката, ако е зададен на false - тогава тази анимация ще игнорира опашката и ще започне незабавно

Ако погледнете ръководството за потребителя, можете да намерите още няколко спомагателни функции в раздела за ефекти:

show () - показва избрани елементи
hide () - скрива избраните елементи
toggle () - превключване между показване/скриване
slideDown (скорост, обратно извикване) - избутва обекта (ите) надолу - увеличава височината от 0 до 100%
slideUp (скорост, обратно извикване) - премества обекта (ите) нагоре - намалява височината от 100% на 0
slideToggle (скорост, обратно повикване) - превключване между slideDown/slideUp
fadeIn (скорост, обратно повикване) - показва избраните елементи - променя прозрачността на елементите
fadeOut (скорост, обратно извикване) - скрива избраните елементи - променя прозрачността на елементите
fadeTo (скорост, непрозрачност, обратно извикване) - променя прозрачността на елементите до определената стойност

Най-простите методи за скриване и показване правят без анимационната функция, тъй като манипулирайте само атрибута на дисплея (демонстрация):

Както казах по-рано, останалите спомагателни функции са просто обвивки над animate, ще дам пример (демонстрация):

В действителност изпълнението на тези методи е малко по-сложно, но това не променя същността.

Също така трябва да обърнете внимание на начина за задаване на CSS параметри за анимация:

Стъпка Обратно обаждане

Не забравяйте за функцията стъпка, ще дам пример за използване (демо):

Прекъсване

Понякога трябва да деактивирате цялата анимация (например за отстраняване на грешки) - използвайте следната конструкция:

Малко за последователността на работа на анимационната функция - повечето от моите читатели вече са запознати с организацията на последователна анимация - за това можем да използваме верига от повиквания:

За да стартирате анимацията паралелно, ще трябва да направите следните промени:

Има и функции Спри се - използвайки тази функция, можем да спрем изпълнението на текущата или всички анимации (демонстрация):

Измислихме как да изчистим опашката, сега можете да копаете малко по-дълбоко и да разберете как можете да управлявате опашката. JQuery има следните функции за тази цел:

опашка (име) - връща опашка - масив от функции
опашка (име, обратно извикване) - добавя функция към опашката
опашка (име, опашка) - заменя текущата опашка с нова
dequeue (name) - взема първата функция от опашката и я изпълнява

По подразбиране всички манипулации се извършват с опашката „fx“ - т.е. опашка с цялата анимация

Тези функции може да са необходими за управление на анимацията (демонстрация):

Или ето пример за внедряване на опашка, различна от „fx“:

Засега виждам един недостатък - всички анимации използват опашката „fx“ и това не може да бъде променено по никакъв начин. анимацията или върви заедно с всички в тази опашка, или се стартира сама от себе си, не можете да присвоите анимация на друга опашка

Връщайки се към анимацията, мисля, че си струва да се обърне внимание на начина на "изграждане" на стойностите на свойствата на CSS, това се случва както следва:

По подразбиране за промяна на делта се използва линейно уравнение, по желание можете да посочите „люлка“, но с помощта на приставката за облекчаване можете да разнообразите този списък (демонстрация):

Четириъгълник - квадратична функция (делта = прогрес 2).
Кубичен - кубична функция (делта = прогрес 3).
Кварта - делта = напредък 4 .
Куинт - делта = напредък 5 .
Експо - експоненциална функция (делта = 2 (прогрес - 1) × 8)
Кръг - четвърт кръг (делта = 1 - грях (acos (напредък)))
Синус - парче от синусоида (делта = 1 - грех ((1 - прогрес) × π/2))
обратно - първо дърпа делтата в минус, а след това плавно я довежда до 1
Подскачай - скачащ преход
Еластична - еластичен преход (ластик)

Тези функции работят със следните параметри (именуване на параметри от jquery.js):

стр - съотношението на анимацията, варира от 0 до 1
н - коефициент, наложен върху времето (p * продължителност)
firstNum - начална стойност = 0
разл - промяна на стойността = 1

При подготовката на този раздел са използвани материали от статията Анимация в MooTools. Основите и не само

Има няколко приставки, които разширяват функционалността на animate (може би използвате още някои, отпишете се):

облекчаване - допълнителни уравнения за облекчаване (позволява ви да разнообразите анимацията)
цвят - ви позволява плавно да променяте цвета на шрифта/фона/границата
backgroundPosition - с негова помощ можем да анимираме фоновото изображение на елементи

Изводът подсказва сам по себе си - повечето приставки за анимация са просто обвивки над анимация и затова не винаги си струва да свързвате приставки на трети страни, за да постигнете целта си.