Sekiranya anda pertama kali menggunakan jQuery bertahun-tahun yang lalu, mungkin kemampuannya untuk melakukan animasi. Itu mungkin salah satu cabutan besar pertama jQuery. Hari ini, CSS dapat melakukan animasi dengan sokongan penyemak imbas yang cukup baik dan cenderung lebih berprestasi, jadi kurang relevan. Namun, jika anda memerlukan sokongan penyemak imbas yang sangat dalam, jQuery masih menjadi pilihan.
Kami telah membincangkan cara menukar CSS di jQuery. Ia kelihatan seperti ini:
$("#element").css(( "background-color": "red", "left": "20px" ));Daripada mengalihkan elemen itu kepada nilai-nilai tersebut dengan serta-merta, kita dapat menghidupkannya. Ia kelihatan hampir sama:
$("#element").animate(( "background-color": "red", "left": "20px" ));Inilah Pen yang kami buat dalam video:
Lihat Pen E111fbfa7506d19034d977b17e2160a3 oleh Chris Coyier (@chriscoyier) di CodePen
Sekiranya kita melihat elemen tersebut dalam alat penyemak imbas, kita dapat melihat bagaimana jQuery melakukan animasi itu. Pada dasarnya, ia mengulangi gaya sebaris yang diterapkan pada elemen tersebut
Dalam video ini kita menggali beberapa kod jQuery yang ditulis oleh orang lain untuk melihat sejauh mana kita dapat membedahnya.
Lihat tinggi animasi Pen jQuery: automatik oleh Josh Parrett (@JTParrett) di CodePen
Sepanjang perjalanan itu, kami meneruskan perjalanan sampingan yang menarik untuk animasi ke ketinggian automatik. Ini adalah sesuatu yang tidak dapat dilakukan oleh CSS atau JavaScript. Mereka lebih suka nombor yang sukar. Anime 10px hingga 200px masuk akal. Anime 10px hingga "apa sahaja yang anda biasa" tidak semudah itu.
Dalam kod Josh, kita dapati fungsi pintar yang pada dasarnya menetapkan ketinggian ke automatik, mengukurnya, menetapkannya kembali ke semula, kemudian menghidupkan nilai yang baru diuji. Caranya cukup kemas! Untuk demo yang lebih mantap berulang-alik dan dalam JavaScript mentah, lihat di sini.
Saya tidak menyedari sehingga selepas video berakhir, tetapi jQuery sebenarnya juga membantu kita dengan perkara ini. Failkan dengan alasan untuk menggunakan jQuery # 40985. Menggunakan .slideUp/ .slideDown/ .slideToggle- ia hanya berfungsi entah bagaimana, walaupun elemen itu disembunyikan display: noneuntuk bermula.
Lihat tinggi animasi Pen jQuery: automatik oleh Chris Coyier (@chriscoyier) di CodePen
Untuk menguji kerja kami di IE lama, kami menggunakan BrowserStack, yang juga terintegrasi dalam CodePen.