JQuery menyediakan berbagai metode efek untuk menambahkan animasi dan interaksi pada elemen HTML. Berikut adalah beberapa metode efek yang sering digunakan dalam JQuery:
- .fadeIn(): Membuat elemen HTML muncul dengan memudar.
$("element").fadeIn();
- .fadeOut(): Membuat elemen HTML menghilang dengan memudar.
$("element").fadeOut();
- .fadeToggle(): Menampilkan atau menyembunyikan elemen HTML dengan memudar.
$("element").fadeToggle();
- .slideDown(): Membuat elemen HTML muncul dengan meluncur turun.
$("element").slideDown();
- .slideUp(): Membuat elemen HTML menghilang dengan meluncur ke atas.
$("element").slideUp();
- .slideToggle(): Menampilkan atau menyembunyikan elemen HTML dengan meluncur.
$("element").slideToggle();
- .animate(): Membuat elemen HTML bergerak dengan cara yang ditentukan.
$("element").animate({
property: value,
property: value,
...
});
Catatan: Dalam contoh-contoh di atas, “element” adalah selector yang menentukan elemen HTML yang akan diterapkan efek, dan “property” dan “value” adalah properti dan nilai CSS yang akan diterapkan selama animasi.
Contoh Full Kode
Berikut adalah contoh full kode yang menggunakan metode efek fadeIn() pada 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(){
$("p").fadeIn();
});
});
</script>
</head>
<body>
<button>Fade In</button>
<p style="display:none;">Ini adalah teks yang akan muncul dengan memudar.</p>
</body>
</html>
Catatan: Dalam contoh ini, saat tombol “Fade In” diklik, elemen HTML “p” akan muncul dengan memudar.
