Ha sok évvel ezelőtt vettél részt először a jQuery-n, akkor az lehet, hogy animációra képes. Talán ez volt a jQuery egyik első nagy húzása. Manapság a CSS képes animációkra is, meglehetősen tisztességes böngészőtámogatással, és általában jobban teljesít, így kevésbé releváns. Ha azonban rendkívül mély böngésző támogatásra van szüksége, akkor a jQuery továbbra is opció.
A CSS megváltoztatásának a jQuery-ben már kitértünk rá. Ez így néz ki:
$("#element").css(( "background-color": "red", "left": "20px" ));Ahelyett, hogy ezt az elemet azonnal átirányítanánk ezekre az értékekre, animálhatjuk őket. Szinte pontosan ugyanúgy néz ki:
$("#element").animate(( "background-color": "red", "left": "20px" ));Itt van a toll, amelyet a videóban készítettünk:
Lásd Chris Coyier (@chriscoyier) tollját e111fbfa7506d19034d977b17e2160a3 a CodePen-en
Ha megvizsgáljuk az elemet a böngészők fejlesztői eszközeiben, láthatjuk a motorháztető alatt, hogy a jQuery hogyan csinálja ezt az animációt. Lényegében gyorsan iterálja az adott elemekre alkalmazott beágyazott stílusot
Ebben a videóban beásunk néhány jQuery kódot, amelyet valaki más írt, hogy lássa, mennyire tudjuk boncolni.
Lásd a Pen jQuery animációs magasságát: Josh Parrett (@JTParrett) auto a CodePen-en
Az utazás során érdekes kis mellékutat teszünk meg az animációval az autós magasságig. Ez az, amire sem a CSS, sem a JavaScript nem képes különösen jól. Inkább a kemény számokat kedvelik. A 10–200 képpont értékű animációnak van értelme. A 10 képpontos kép élesztése „bármi is lennél általában” nem olyan egyszerű.
Josh kódjában találunk egy okos függvényt, amely lényegében automatikus magasságot állít be, megméri, visszaállítja annak, ami volt, majd animálja az újonnan tesztelt értéket. Elég ügyes trükk! A robusztusabb, előre-hátra és nyers JavaScript-ben bemutatott bemutatóért lásd itt.
Csak a videó vége után vettem észre, de a jQuery ebben is segít minket. Fájl, amelyet ésszerűen használhat a jQuery # 40985 használatához. A .slideUp/ .slideDown/ használata .slideToggle- csak valahogy működik, még akkor is, ha az elem el van rejtve a display: nonekezdéshez.
Lásd a Pen jQuery animációs magasságát: Chris Coyier (@ chriscoyier) auto a CodePen-en
A régi IE-n végzett munkánk teszteléséhez a BrowserStack-et használtuk, amely szintén integrálva van a CodePen-be.