Преглед садржаја
Анимирани ефекти у јКуери То нису анимације које познајемо, односно нећемо дати покрет цртежу, важно је то разјаснити јер то може довести до забуне. Ови анимирани ефекти односе се на начин на који се стварају прелази елемената унутар СУНЦЕ, елемент који се може споро кретати из угла прегледача или нестати ломећи се на хиљаде делова.На први поглед може се чинити да су нам корисне, али на крају, ако желимо да се елемент појави или нестане, можда нам неће бити важно како се то догађа, међутим за оне који проучавају понашање кориснички интерфејси Ово је веома важно јер може подесити расположење корисника или бити приказано као суптилан начин да визуелни изглед учини нешто привлачнијим.
Наравно, има и оних који злоупотребљавају и преувеличавају употребу анимираних ефеката и преоптерећују интерфејс толико да он постаје тежак или непоуздан и натера корисника да пати приликом коришћења система, зато је потребно имати минимум савести и умереност при примени ових врста ефеката.
Важно је знати да се разликују врсте анимација Имају бројне опције којима се може управљати из позива који упућујемо, можемо контролисати његово трајање, тако да можемо калибрисати да ли ефекат утиче на употребљивост или не и ако се у зависности од времена трајања може детаљно детаљно приказати и постићи жељени ефекат, а ми такође може означити функцију или метод који ће се извршити у позове на крају анимације, на пример ако учинимо да дугме нестане када га више нема, извршава се метода која затим шаље поруку кориснику.
Друга могућност коју имамо је да прођемо а мапа објеката у којима дефинишемо напредне или ексклузивне опције анимираног ефекта који користимо, међутим то је пре свега када желимо да урадимо нешто врло специфично и напредно. Синтакса за коришћење ових опција је следећа:
$ (селектор) .еффецт (дуратион); $ (селектор) .еффецт (трајање, функција ЦаллБацк); $ (селектор) .еффецт (фунцтионЦаллБацк); $ (селецтор) .еффецт (мапОбјецтс);
Како видимо да сваки ред одговара свакој од могућих варијација које можемо примијенити у стандардним анимацијама, могуће је да нека анимација има одређену карактеристику, међутим с онима које ћемо видјети у овом водичу ћемо с тим радити.
Један од најчешће кориштених и најкориснијих ефеката које можемо смислити је приказивање и скривање елемената, а показало се и да су то прилично једноставни ефекти за имплементацију, зато ћемо их користити као примјер.
схов () и хиде ()Методе које нам омогућавају постизање ових циљева су Прикажи() И сакрити (), како видимо да њихова имена на енглеском одговарају радњи, приказују се за прву, а за другу скривају, она се могу применити на било који елемент у оквиру СУНЦЕ, па су прилично практични и корисни.
Направићемо малу анимацију у којој ћемо користити трајање и позив на функцију позове у време извршења применићемо ефекте Прикажи() И сакрити () и тако можемо научити како се они користе.
У следећем коду видимо како на првом месту оно што радимо је укључивање библиотеке јКуери из једног од ЦДН адекватно, чиме избегавамо локално складиштење и на тај начин ћемо искористити предмеморију прегледача.
Затим дефинишемо два блока назван итем1 И елемент2 респективно, где је први скривен, а други видљив и на крају имамо дугме које каже почетак на које се примењујемо у његовом догађају клика који извршава функцију охрабри ().
Функција охрабри () прво примените анимацију Прикажи() до итем1 и даје му вредност од 1000 мили-секунди која је једнака 1 секунди и овоме додајемо а позове где примењујемо ефекат сакрити () наш елемент2 и генерише поруку по конзоли.
Унутар анимације сакрити () на шта се пријављујемо елемент2 створили смо а позове где ћемо такође писати поруку путем конзоле. Па погледајмо код за наш први пример:
АнимацијеОво је наш почетни скривени елемент
Да бисте покренули анимацију, кликните на дугме
Почетак
Хајде сада да видимо како то изгледа у нашем прегледачу, на следећој слици ћемо видети ХТМЛ Пре него што извршимо било коју радњу, погледајмо како се итем1 није приказано:
Постоје случајеви када желимо да дугме ради као прекидач, приказујући и скривајући елемент или групу елемената, иако је то лако учинити проценом стања и коришћењем метода Прикажи() И сакрити (), истина је да бисмо генерисали превише кода за нешто тако једноставно, зато је тим јКуери размишљали су о томе и пружају нам методу искључи ().
Шта ради метода тоггле ()?Оно што ова метода ради је процена тренутног стања елемента и стога, ако је видљив, сакрива га, а ако је скривен то показује, на шта указује понашање типа прекидача. Најбоље је што овој методи можемо додати различите опције анимације, са трајањем и могућношћу извођења позове.
Хајде сада да направимо пример где ћемо применити оно што смо научили о методи тоггле (), да видимо доњи код:
АнимацијеРезултат извршавања тоггле () ефекта.
Почетак
У следећем коду видећемо како смо креирали див који се зове итем1 која је у почетку скривена, тада имамо дугме Почетак која ће при клику позвати функцију анимате, имаће метод искључи () примењено на елемент и прво ће се појавити и приказати поруку по конзоли.
Погледајмо почетно стање овог кода према прегледачу, приметићемо да имамо само дугме и нема ништа у конзоли:
Погледајмо на следећој листи његове еквиваленте Прикажи() и до сакрити ():
фадеИн () и слидеИн ()Они одговарају ефектима за приказивање елемената, односно еквивалентни су Прикажи().
фадеОут и слидеОут ()Они одговарају ефектима скривања елемената, односно еквивалентни су сакрити ().
фадеТоггле () и слидеТоггле ()Постоји трећи случај и то онај који одговара ефектима прекидача и они су еквивалентни искључи ().
Као вежбу, дозволили смо вам да поново прођете кроз примере, али користећи ове нове методе како бисте из прве руке видели како они функционишу.
Овим смо завршили овај водич, научили смо анимирати наше елементе на суптилан и интелигентан начин, важно је не злоупотребљавати ове ефекте на начин постављања врло дугог времена анимације, јер оно што ћемо постићи је да живцирамо корисника и одлажу њихов рад, имајући у виду да морамо да задржимо употребљивост изнад свега.
