Реализиране на анимации с jQuery

Анимираните ефекти в jQuery Те не са анимациите, които познаваме, тоест няма да дадем движение на рисунка, важно е да изясним това, тъй като това може да доведе до объркване. Тези анимирани ефекти се отнасят до начина, по който се генерират преходите на елементи в рамките на СЛЪНЦЕ, елемент, който може да се движи бавно от ъгъла на браузъра или да изчезне, разбивайки се на хиляди парчета.
На пръв поглед може да изглежда, че те са ни полезни, в крайна сметка, ако искаме да се появи или изчезне елемент, за нас може да няма значение как се случва, но за тези, които изучават поведението на потребителски интерфейси Това е много важно, тъй като може да зададе настроението на потребителя или да се покаже като фин начин да направи визуалното малко по -привлекателно.
Разбира се, има и такива, които злоупотребяват и преувеличават използването на анимирани ефекти и претоварват интерфейса толкова много, че той става тежък или ненадежден и кара потребителя да страда при използване на системата, затова е необходимо да има минимум съвест и умереност при прилагане на този тип ефекти.
Важно е да знаете, че различните видове анимации Те имат редица контролируеми опции от повикването, което правим, можем да контролираме продължителността му, така че да можем да калибрираме дали ефектът влияе върху използваемостта или не и ако в зависимост от продължителността на времето може да бъде детайлизиран и да постигнем желания ефект и ние може също да посочи функцията или метода, който да се изпълни в обратно повикване в края на анимацията, например, ако накараме бутон да изчезне, когато вече го няма, се изпълнява метод, който след това изпраща на потребителя съобщение.
Друг вариант, който имаме, е да преминем a карта на обекта в които дефинираме разширените или изключителните опции на анимирания ефект, който използваме, но това е най -вече, когато искаме да направим нещо много специфично и усъвършенствано. Синтаксисът за използване на тези опции е следният:

 $ (селектор) .effect (продължителност); $ (селектор) .effect (продължителност, функция CallBack); $ (селектор) .effect (functionCallBack); $ (селектор) .effect (mapObjects); 

Тъй като виждаме, че всеки ред съответства на всеки от възможните вариации, които можем да приложим в стандартните анимации, възможно е някои анимации да имат определена характеристика, но в тези, които ще видим в този урок, ще работим с това.
Един от най -използваните и най -полезни ефекти, за които можем да се сетим, е показването и скриването на елементи, а също така се оказва, че те са доста прости за изпълнение ефекти, затова ще ги използваме като пример.
show () и hide ()Методите, които ни позволяват да постигнем тези цели, са Покажи () Y Крия (), тъй като виждаме имената им на английски съответстват на действието, показват за първото и скриват за второто, те могат да бъдат приложени към всеки елемент в рамките на СЛЪНЦЕ, така че те са доста практични и полезни.
Ще направим малка анимация, в която ще използваме продължителността и извикването на функция callBack по време на изпълнението ще приложим ефектите Покажи () Y Крия () и така можем да научим как се използват те.
В следния код виждаме как на първо място това, което правим, е да включим библиотеката jQuery от един от CDN адекватни, с това избягваме да го съхраняваме локално и по този начин ще се възползваме от кеша на браузъра.
След това дефинираме два блока на име т.1 Y елемент2 съответно, където първият е скрит, а вторият видим и накрая имаме бутон, който казва начало, към който прилагаме в неговото събитие на щракване, което изпълнява функцията насърчаване ().
Функцията насърчавам () първо приложете анимацията Покажи () към т.1 и му придава стойност от 1000 милисекунди, която е равна на 1 секунда и към това добавяме a callBack където прилагаме ефекта Крия () нашият елемент2 и генерира съобщение на конзола.
Вътре в анимацията Крия () за какво се отнасяме елемент2 създадохме a callBack където също ще напишем съобщение чрез конзола. Нека да разгледаме кода за първия ни пример:

 Анимации
Това е нашият първоначален скрит елемент

За да стартирате анимацията, кликнете върху бутона
Старт 

Нека да видим сега как изглежда в нашия браузър, на следващото изображение ще видим HTML Преди да извършим каквото и да е действие, нека да разгледаме как т.1 не е показано:

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

По прост начин ние сме дали живот на показването и скриването на елементите в нашия документ HTML.
Има моменти, когато искаме бутон да работи като превключвател, показващ и скриващ елемент или група от елементи, въпреки че това е лесно да се направи чрез оценка на състоянията и използване на методите Покажи () Y Крия (), истината е, че бихме генерирали твърде много код за нещо толкова просто, затова екипът на jQuery те са помислили за това и ни предоставят метода превключвател ().
Какво прави методът toggle ()?Този метод прави оценка на текущото състояние на елемента и по този начин, ако е видим, той го скрива и ако е скрит, той го показва, както е посочено от поведението на превключвателя. Най -хубавото е, че към този метод можем да добавим различните опции за анимация, с продължителност и възможност за извършване на callBack.
Нека сега изградим пример, в който прилагаме на практика това, което сме научили за метода toggle (), нека видим кода по -долу:

 Анимации
Резултатът от изпълнението на ефекта toggle ().

Старт 

В следния код ще видим как сме създали div, наречен т.1 който първоначално е скрит, тогава имаме бутон Старт която при щракване ще извика функцията animate, тя ще има метода превключване () приложен към елемента и на първо място той ще се появи и ще покаже съобщение на конзола.
Нека да видим първоначалното състояние на този код от браузъра, ще забележим, че имаме само бутона и няма нищо в конзолата:

Сега нека видим как при натискане на бутона скритият елемент се появява и отразява съобщението до нас чрез конзолата:

И накрая, ако кликнете отново върху бутона, елементът ще бъде скрит и съобщението ще се повтори в конзолата, което забелязваме, когато видим номера три до него, което показва колко пъти е било задействано събитието.

да, добре Покажи () Y Крия () Те са ефективни, на пръв поглед може да изглеждат малко прости, затова имаме и други методи, които ни помагат да правим различни анимации, в случая говорим за избледняват Y пързалка които съответстват на избледняване и плъзгане, където първият има ефект като поява, а вторият се плъзга от ръба на екрана или контейнера на елемента.
Нека видим в следващия списък неговите еквиваленти на Покажи () и към Крия ():
fadeIn () и slideIn ()Те съответстват на ефектите за показване на елементи, тоест те са еквивалентни на Покажи ().
fadeOut и slideOut ()Те съответстват на ефектите за скриване на елементи, тоест са еквивалентни на Крия ().
fadeToggle () и slideToggle ()Има трети случай и той е този, който съответства на ефектите от типа превключвател и те са еквивалентни на превключвател ().
Като упражнение ви позволяваме да прегледате отново примерите, но използвайки тези нови методи, така че да видите от първа ръка как работят.
С това приключваме този урок, научихме се да анимираме елементите си по фин и интелигентен начин, важно е да не злоупотребяваме с тези ефекти, за да поставим много дълги времена на анимация, тъй като това, което ще постигнем, е да дразним потребителя и забавят работата им, като помнят, че трябва да поддържаме използваемостта преди всичко.