Anda dapat menggabungkan efek dan animasi pada elemen HTML untuk membuat interaksi yang lebih menarik menggunakan jQuery. Misalnya, Anda dapat menambahkan efek fade in dan out pada animasi memperbesar dan memperkecil ukuran elemen HTML.
Berikut adalah contoh full kode yang menunjukkan gabungan efek fade in dan out dengan animasi memperbesar dan memperkecil ukuran elemen HTML:
<!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").fadeOut(1000, function() {
$("div").animate({
width: "500px",
height: "500px"
}, 1000);
$("div").fadeIn(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 memperkecil ukurannya menjadi 0px x 0px dan menghilang (fade out) dalam waktu 1 detik (1000 milidetik), lalu setelah itu akan memperbesar ukurannya menjadi 500px x 500px dan muncul kembali (fade in) dalam waktu 1 detik.
