jQuery menyediakan berbagai metode efek dan animasi yang dapat membuat elemen HTML bergerak dan berubah. Salah satu metode animasi yang sering digunakan adalah metode animate().
Metode animate() memungkinkan Anda menentukan properti CSS dan nilai yang ingin diterapkan pada elemen HTML selama animasi. Durasi animasi juga dapat ditentukan.
Berikut adalah contoh penggunaan metode animate():
$("element").animate({
width: "500px",
height: "500px"
}, 1000);
Catatan: Dalam contoh ini, elemen HTML “element” akan memiliki lebar dan tinggi yang bertambah menjadi 500px dalam waktu 1 detik (1000 milidetik).
Contoh Full Kode
Berikut adalah contoh full kode yang menunjukkan animasi memperbesar dan memperkecil ukuran elemen HTML saat diklik:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
width: "500px",
height: "500px"
}, 1000, function() {
$("div").animate({
width: "100px",
height: "100px"
}, 1000);
});
});
});
</script>
</head>
<body>
<button>Animate</button>
<div style="background-color:red;width:100px;height:100px;"></div>
</body>
</html>
Catatan: Dalam contoh ini, saat tombol “Animate” diklik, elemen HTML “div” akan memperbesar ukurannya menjadi 500px x 500px dalam waktu 1 detik (1000 milidetik), lalu setelah itu akan kembali memperkecil ukurannya menjadi 100px x 100px.
