Se ti sei dilettato per la prima volta con jQuery molti anni fa, potrebbe essere stata la sua capacità di fare animazione. Questo è stato forse uno dei primi grandi progetti di jQuery. Al giorno d'oggi, i CSS possono eseguire anche animazioni con un supporto browser abbastanza decente e tendono ad essere più performanti, quindi sono meno rilevanti. Tuttavia, se hai bisogno di un supporto browser super profondo, jQuery è assolutamente ancora un'opzione.
Abbiamo già spiegato come cambiare CSS in jQuery. Assomiglia a questo:
$("#element").css(( "background-color": "red", "left": "20px" ));Invece di spostare immediatamente quell'elemento su quei valori, possiamo animarli. Sembra quasi esattamente lo stesso:
$("#element").animate(( "background-color": "red", "left": "20px" ));Ecco la penna che abbiamo realizzato nel video:
Guarda la penna e111fbfa7506d19034d977b17e2160a3 di Chris Coyier (@chriscoyier) su CodePen
Se esaminiamo quell'elemento negli strumenti di sviluppo del browser, possiamo vedere sotto il cofano come jQuery sta facendo quell'animazione. Essenzialmente, itera rapidamente lo stile in linea applicato a quegli elementi
In questo video approfondiamo un po 'di codice jQuery che qualcun altro ha scritto per vedere quanto bene possiamo analizzarlo.
Guarda la Pen jQuery animate height: auto di Josh Parrett (@JTParrett) su CodePen
Durante quel viaggio, intraprendiamo un piccolo e interessante viaggio laterale sull'animazione ad altezze automatiche. Questo è qualcosa che né CSS né JavaScript possono fare particolarmente bene. Preferiscono numeri difficili. Animate da 10px a 200px ha senso. Animare 10px in "qualunque cosa saresti normalmente" non è così facile.
Nel codice di Josh, troviamo una funzione intelligente che essenzialmente imposta l'altezza su auto, la misura, la riporta a quello che era, quindi anima a quel valore appena testato. Trucco abbastanza accurato! Per una demo più robusta che va avanti e indietro e in JavaScript non elaborato, vedere qui.
Non me ne sono accorto fino alla fine del video, ma jQuery in realtà ci aiuta anche in questo. File che ha motivo di utilizzare jQuery # 40985. Usando .slideUp/ .slideDown/ .slideToggle- funziona in qualche modo, anche se l'elemento è nascosto con display: noneper iniziare.
Guarda l'altezza animata di Pen jQuery: auto di Chris Coyier (@chriscoyier) su CodePen
Per testare il nostro lavoro nel vecchio IE, abbiamo utilizzato BrowserStack, anch'esso integrato in CodePen.