Pokud jste se s jQuery poprvé zabavili před mnoha lety, mohla to být schopnost dělat animaci. To byl možná jeden z prvních velkých losování jQuery. V dnešní době může CSS dělat také animace s poměrně slušnou podporou prohlížeče a má tendenci být výkonnější, takže je méně relevantní. Pokud však potřebujete super hlubokou podporu prohlížeče, jQuery je absolutně stále možnost.
Už jsme se zabývali tím, jak změnit CSS v jQuery. Vypadá to takto:
$("#element").css(( "background-color": "red", "left": "20px" ));Místo okamžitého posunutí tohoto prvku na tyto hodnoty je můžeme animovat. Vypadá téměř úplně stejně:
$("#element").animate(( "background-color": "red", "left": "20px" ));Tady je pero, které jsme vytvořili ve videu:
Podívejte se na pero e111fbfa7506d19034d977b17e2160a3 od Chris Coyier (@chriscoyier) na CodePen
Pokud tento prvek zkontrolujeme v nástrojích pro vývoj prohlížeče, můžeme vidět pod kapotou, jak jQuery tuto animaci dělá. V podstatě rychle iteruje inline styling aplikovaný na tyto prvky
V tomto videu se ponoříme do nějakého kódu jQuery, který napsal někdo jiný, abychom zjistili, jak dobře jej můžeme rozebrat.
Podívejte se na animovanou výšku pera jQuery: auto od Josha Parretta (@JTParrett) na CodePen
Během této cesty se vydáme na zajímavou malou vedlejší cestu animací do automatických výšin. To je něco, co ani CSS, ani JavaScript neumí nijak zvlášť dobře. Dávají přednost tvrdým číslům. Animate od 10 do 200 pixelů má smysl. Animujte 10px na „cokoli byste normálně byli“ není tak snadné.
V Joshově kódu najdeme chytrou funkci, která v podstatě nastaví výšku na auto, změří ji, nastaví zpět na to, čím byla, a poté animuje na tuto nově testovanou hodnotu. Docela elegantní trik! Robustnější ukázku, která funguje tam a zpět a v surovém JavaScriptu, najdete zde.
Všiml jsem si to až po skončení videa, ale jQuery nám s tím také pomáhá. Soubor, který z důvodu použití jQuery # 40985. Pomocí .slideUp/ .slideDown/ .slideToggle- to prostě nějak funguje, i když je prvek display: nonepro začátek skrytý .
Podívejte se na animovanou výšku pera jQuery: auto od Chrisa Coyiera (@chriscoyier) na CodePen
K otestování naší práce ve starém IE jsme použili BrowserStack, který je také integrován do CodePen.