by 
Animasi halus membuat antarmuka terasa hidup, misalnya menggeser panel atau memudarkan elemen. Artikel ini membahas cara membuat animasi CSS dengan jQuery (animate).
Metode .animate()
<script>
$("#kotak").animate({
opacity: 0.5,
width: "300px",
marginLeft: "50px"
}, 1000); // durasi 1 detik
</script>
Contoh Kasus: Sidebar Geser
<script>
$("#buka").click(function() {
$("#sidebar").animate({ left: "0px" }, 300);
});
$("#tutup").click(function() {
$("#sidebar").animate({ left: "-250px" }, 300);
});
</script>
Dengan Callback
<script>
$("#kotak").animate({ height: "200px" }, 500, function() {
console.log("Animasi selesai");
});
</script>
Catatan Penting
.animate() hanya bekerja pada properti CSS numerik (seperti width, opacity, left), bukan warna atau display. Untuk animasi kompleks, transisi CSS sering lebih efisien.
Kesimpulan
Gunakan .animate() untuk menganimasikan properti CSS numerik seperti pada sidebar geser. Fungsi callback berjalan setelah animasi selesai. Untuk performa terbaik, pertimbangkan transisi CSS pada animasi sederhana.
Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi jQuery (api.jquery.com).
