Ak ste sa s programom jQuery zoznámili pred mnohými rokmi, mohla to byť schopnosť robiť animácie. To bolo možno jedno z prvých veľkých žrebov jQuery. V dnešnej dobe dokáže CSS robiť aj animácie s pomerne slušnou podporou prehľadávača a má tendenciu byť výkonnejší, takže je menej relevantný. Ak však potrebujete super hlbokú podporu prehľadávača, jQuery je absolútne stále na výber.
Ako zmeniť CSS v jQuery sme sa už zaoberali. Vyzerá to takto:
$("#element").css(( "background-color": "red", "left": "20px" ));Namiesto okamžitého posunutia tohto prvku na tieto hodnoty ich môžeme animovať. Vyzerá takmer úplne rovnako:
$("#element").animate(( "background-color": "red", "left": "20px" ));Tu je pero, ktoré sme vytvorili vo videu:
Pozrite si pero e111fbfa7506d19034d977b17e2160a3 od Chrisa Coyiera (@chriscoyier) na stránkach CodePen
Ak tento prvok skontrolujeme v nástrojoch vývojárov prehliadačov, môžeme pod kapotou vidieť, ako jQuery robí túto animáciu. V podstate rýchlo iteruje vložený štýl použitý pre tieto prvky
V tomto videu sa ponoríme do kódu jQuery, ktorý napísal niekto iný, aby sme zistili, ako dobre ho dokážeme rozobrať.
Pozrite si animovanú výšku pera jQuery: auto od Josha Parretta (@JTParrett) na CodePen
Počas tejto cesty sa vydáme na zaujímavú malú bočnú cestu pri animovaní do automatických výšok. To je niečo, čo nedokáže ani CSS, ani JavaScript, zvlášť dobre. Preferujú tvrdé čísla. Animate od 10 do 200 pixelov má zmysel. Animujte 10px na „čokoľvek, čo by ste normálne boli“ nie je také ľahké.
V Joshovom kóde nájdeme šikovnú funkciu, ktorá v podstate nastaví výšku na auto, zmeria ju, vráti späť na pôvodnú hodnotu a potom animuje túto novo testovanú hodnotu. Docela úhľadný trik! Ak sa chcete dozvedieť viac robustnejšej ukážky, ktorá funguje tam a späť a v nespracovanom JavaScripte, nájdete tu.
Všimol som si to až po skončení videa, ale jQuery nám s tým vlastne pomáha tiež. Podajte súbor, ktorý z dôvodu použitia jQuery # 40985. Pomocou .slideUp/ .slideDown/ .slideToggle- to nejako funguje, aj keď je element display: nonena začiatku skrytý .
Pozrite si animovanú výšku pera jQuery: auto od Chrisa Coyiera (@chriscoyier) na CodePen
Na otestovanie našej práce v starom IE sme použili BrowserStack, ktorý je tiež integrovaný do CodePen.