Tombol diklik, panel muncul tiba-tiba, dan halaman terasa melompat. Penyebabnya biasanya durasi dan urutan yang tidak diatur, bukan animasinya. Tips jQuery untuk pemula animasi sederhana berikut membahas cara mengatur gerakan elemen supaya terasa wajar tanpa menambah banyak kode.
Mulai dari durasi, jangan dari efek
Pemula sering memilih efek dulu, baru mengatur waktunya. Coba balik urutannya: tentukan berapa lama gerakan harus berjalan, lalu pilih metode yang sesuai.
Nilai "fast" dan "slow" bawaan jQuery terasa tidak konsisten di antara browser versi lama. Pakai angka dalam milidetik supaya hasilnya bisa diprediksi.
$("#panel").slideDown(250);
$("#panel").fadeIn(180);Angka 150 sampai 300 milidetik cukup untuk sebagian besar transisi antarmuka. Kalau lebih dari 500 milidetik, pengguna mulai merasa menunggu, terutama saat membuka menu atau accordion.
Kenali tiga metode dasar dan kapan memakainya
jQuery punya banyak metode animasi, tapi tiga yang paling sering dipakai pemula adalah fadeIn(), slideDown(), dan animate(). Masing-masing punya karakter berbeda.
- fadeIn/fadeOut cocok untuk elemen yang muncul di tempat tetap, seperti pesan notifikasi atau tooltip.
- slideDown/slideUp pas untuk konten yang mendorong elemen lain ke bawah, misalnya accordion atau panel filter.
- animate dipakai saat kamu perlu mengubah properti CSS tertentu, seperti lebar, tinggi, atau posisi.
Kalau kamu membangun accordion, pola animasi slide dengan tinggi otomatis dibahas lebih rinci di tutorial accordion jQuery dengan animasi slide. Prinsipnya sama: durasi dan easing menentukan apakah gerakannya terasa halus atau patah.
Atur easing untuk gerakan yang tidak monoton
Secara bawaan jQuery hanya menyediakan swing dan linear. swing memberi percepatan di awal dan perlambatan di akhir, sedangkan linear bergerak dengan kecepatan tetap.
Untuk transisi antarmuka, swing hampir selalu lebih enak dilihat. linear berguna saat kamu menganimasikan sesuatu yang berulang terus-menerus, misalnya indikator loading.
$("#kotak").animate(
{ left: "200px" },
400,
"swing"
);Kalau butuh easing lain seperti easeInOutQuad, kamu perlu memuat jQuery UI atau plugin easing tambahan. Untuk pemula, dua opsi bawaan sudah cukup.
Pakai antrean animasi, jangan menumpuknya
Memanggil dua animasi pada elemen yang sama tanpa pengaturan membuat keduanya berjalan berurutan secara default. Kadang itu yang diinginkan, kadang justru bikin gerakan terasa lambat.
Kalau ingin animasi berjalan bersamaan, tambahkan queue: false atau gunakan objek opsi.
$("#kotak").animate(
{ opacity: 0.5, width: "300px" },
{ duration: 300, queue: false }
);Sebaliknya, kalau ingin membuat urutan yang jelas, biarkan antrean bekerja. Pola ini sering muncul saat menyusun kode front-end yang lebih rapi, seperti dijelaskan pada artikel 9 pola jQuery untuk merapikan kode front-end.
Tambahkan callback untuk langkah setelah animasi
Callback dijalankan setelah animasi selesai. Manfaatkan untuk hal yang memang harus menunggu, misalnya menghapus elemen dari DOM atau memuat konten berikutnya.
$("#notif").fadeOut(200, function () {
$(this).remove();
});Tanpa callback, kamu mungkin menghapus elemen saat masih terlihat, dan pengguna melihat kedipan aneh. Untuk operasi yang lebih kompleks, seperti mengambil data lalu menambah elemen baru, pilihan metode DOM perlu dipertimbangkan matang. Ulasan soal itu ada di memilih metode untuk menambahkan elemen baru ke DOM dengan jQuery.
Sesuaikan animasi dengan validasi form
Pola animasi paling terasa manfaatnya saat memberi umpan balik pada form. Pesan error yang muncul tiba-tiba sering terlewat, sedangkan pesan yang muncul dengan slide pendek lebih mudah ditangkap mata.
$(".pesan-error").slideDown(150);
$("#form").on("submit", function (e) {
// validasi di sini
});Kalau form kamu memakai PHP untuk memproses data di server, cara menampilkan pesan error dari sisi server bisa disimulasikan dengan animasi yang sama. Panduan lengkapnya ada di cara menampilkan pesan error validasi PHP di form.
Hentikan animasi yang bertabrakan
Pengguna bisa mengklik tombol berulang kali sebelum animasi selesai. Hasilnya, elemen bergerak bolak-balik dan antrean animasi menumpuk.
Pakai stop() sebelum memulai animasi baru.
$("#tombol").on("click", function () {
$("#panel").stop(true, true).slideToggle(200);
});Argumen true, true menghapus antrean yang tersisa dan langsung menyelesaikan animasi yang sedang berjalan. Hasilnya, klik cepat tidak membuat panel tersangkut di tengah.
Pertimbangkan CSS transition untuk kasus sederhana
jQuery bagus untuk animasi yang butuh kontrol urutan dan callback. Untuk perubahan warna atau opasitas sederhana, CSS transition lebih ringan karena berjalan di compositor browser.
- Gunakan CSS transition untuk hover, perubahan warna, dan transform.
- Gunakan jQuery untuk animasi yang bergantung pada tinggi konten, urutan langkah, atau data dari server.
- Hindari menganimasikan properti seperti
topdanleftsecara terus-menerus, karena memicu layout ulang.
Untuk elemen yang ditambah setelah halaman dimuat, event binding perlu diperhatikan agar animasi tetap berjalan. Pola event delegation yang dijelaskan di event delegation jQuery untuk elemen dinamis berguna di situasi ini.
Ringkasan
Animasi yang enak dilihat biasanya bukan yang paling rumit. Tentukan durasi dalam milidetik, pakai easing bawaan dengan bijak, atur antrean, dan hentikan animasi yang bertabrakan dengan stop(). Sisanya soal konsistensi: satu jenis gerakan untuk satu jenis interaksi.
Pertanyaan yang Sering Diajukan
Berapa durasi animasi yang ideal di jQuery?
Untuk sebagian besar transisi antarmuka, 150 sampai 300 milidetik sudah cukup. Animasi yang lebih lama terasa lambat saat pengguna berinteraksi berulang kali.
Apakah animasi jQuery memperlambat halaman?
Bisa, terutama kalau kamu menganimasikan properti layout seperti lebar dan tinggi pada banyak elemen sekaligus. Batasi animasi pada elemen yang terlihat dan pertimbangkan CSS transition untuk perubahan sederhana.
Kapan sebaiknya memakai callback di jQuery?
Pakai callback saat langkah berikutnya bergantung pada animasi yang sudah selesai, misalnya menghapus elemen, memuat konten baru, atau mengaktifkan tombol setelah transisi berakhir.
