Jika Anda pertama kali mencoba-coba jQuery bertahun-tahun yang lalu, mungkin itu adalah kemampuannya untuk membuat animasi. Itu mungkin salah satu hasil imbang besar pertama jQuery. Saat ini, CSS dapat melakukan animasi juga dengan dukungan browser yang cukup baik dan cenderung lebih berkinerja, jadi kurang relevan. Namun, jika Anda membutuhkan dukungan browser yang sangat dalam, jQuery masih bisa menjadi pilihan.
Kami sudah membahas cara mengubah CSS di jQuery. Ini terlihat seperti ini:
$("#element").css(( "background-color": "red", "left": "20px" ));Alih-alih langsung menggeser elemen itu ke nilai-nilai itu, kita bisa menghidupkannya. Ini terlihat hampir persis sama:
$("#element").animate(( "background-color": "red", "left": "20px" ));Inilah Pena yang kami buat di video:
Lihat Pena e111fbfa7506d19034d977b17e2160a3 oleh Chris Coyier (@chriscoyier) di CodePen
Jika kita memeriksa elemen itu di alat pengembang browser, kita dapat melihat di balik terpal tentang bagaimana jQuery melakukan animasi itu. Pada dasarnya, ini dengan cepat mengulangi gaya sebaris yang diterapkan ke elemen itu
Dalam video ini kami menggali beberapa kode jQuery yang ditulis orang lain untuk melihat seberapa baik kami dapat membedahnya.
Lihat Pen jQuery animate height: auto oleh Josh Parrett (@JTParrett) di CodePen
Selama perjalanan itu, kami melakukan perjalanan sampingan kecil yang menarik tentang animasi ke ketinggian otomatis. Ini adalah sesuatu yang tidak dapat dilakukan CSS atau JavaScript dengan sangat baik. Mereka lebih suka angka keras. Menganimasikan 10px hingga 200px masuk akal. Menganimasikan 10px menjadi "apa pun yang biasanya Anda lakukan" tidaklah mudah.
Dalam kode Josh, kita menemukan fungsi pintar yang pada dasarnya mengatur ketinggian ke otomatis, mengukurnya, mengembalikannya ke nilai sebelumnya, lalu menganimasikan ke nilai yang baru diuji tersebut. Trik yang cukup rapi! Untuk demo yang lebih kuat yang bolak-balik dan dalam JavaScript mentah, lihat di sini.
Saya tidak menyadarinya sampai setelah video berakhir, tetapi jQuery sebenarnya membantu kami dalam hal ini juga. File yang menggunakan jQuery # 40985. Menggunakan .slideUp/ .slideDown/ .slideToggle- itu hanya berfungsi entah bagaimana, bahkan jika elemen disembunyikan dengan display: noneuntuk memulai.
Lihat Pen jQuery animate height: auto oleh Chris Coyier (@chriscoyier) di CodePen
Untuk menguji pekerjaan kami di IE lama, kami menggunakan BrowserStack, yang juga terintegrasi dalam CodePen.