Ако сте се први пут бавили јКуери-јем пре много година, можда је то била његова способност да се бавите анимацијом. То је био можда један од првих великих извлачења јКуери-ја. У данашње време ЦСС може да врши и анимацију са прилично пристојном подршком за прегледаче и чини да је ефикаснији, па је мање релевантан. Међутим, ако вам је потребна супер дубока подршка за прегледаче, јКуери је апсолутно још увек опција.
Већ смо говорили о томе како променити ЦСС у јКуери-у. Изгледа овако:
$("#element").css(( "background-color": "red", "left": "20px" ));Уместо да тај елемент тренутно пребацимо на те вредности, можемо их анимирати. Изгледа готово потпуно исто:
$("#element").animate(( "background-color": "red", "left": "20px" ));Ево оловке коју смо направили у видеу:
Погледајте оловку е111фбфа7506д19034д977б17е2160а3 аутора Цхрис Цоииер (@цхрисцоииер) на ЦодеПен
Ако прегледамо тај елемент у алаткама за развој прегледача, испод хаубе можемо видети како јКуери ради ту анимацију. У основи, брзо понавља итељни стил примењен на те елементе
У овом видеу истражујемо неки јКуери код који је неко други написао да бисмо видели колико добро можемо да га сецирамо.
Погледајте анимацијску висину оловке јКуери: ауто Јосх Парретт (@ЈТПарретт) на ЦодеПен
Током тог путовања идемо на занимљиво мало споредно путовање анимирањем до ауто висина. То је нешто што ни ЦСС ни ЈаваСцрипт не могу нарочито добро. Више воле тврде бројеве. Анимација од 10 до 200 пиксела има смисла. Анимирајте 10 пиксела на „оно што бисте иначе били“ није тако лако.
У Јосховом коду пронашли смо паметну функцију која у суштини поставља висину на ауто, мери је, враћа на оно што је била, а затим анимира на ту нову тестирану вредност. Прилично уредан трик! За робуснији приказ који иде напред и назад и у сировом ЈаваСцрипт-у, погледајте овде.
Приметио сам тек након што се видео завршио, али јКуери нам заправо помаже и у томе. Датотека која под разлогом користи јКуери # 40985. Коришћење .slideUp/ .slideDown/ .slideToggle- то некако функционише, чак и ако је елемент скривен са display: noneда започне.
Погледајте Пен јКуери анимате хеигхт: ауто Цхрис Цоииер (@цхрисцоииер) на ЦодеПен
Да бисмо тестирали свој рад у старом ИЕ, користили смо БровсерСтацк, који је такође интегрисан у ЦодеПен.