Halo teman-teman semuanya, di artikel keenam ini, kita akan belajar tentang fitur efek dan animasi di jQuery. jQuery menyediakan berbagai method yang memudahkan kita untuk membuat tampilan web menjadi lebih interaktif dan menarik, tanpa perlu menulis CSS atau JavaScript kompleks.
Dengan efek ini, kita bisa membuat elemen tampil atau hilang secara halus, membuat elemen menggeser naik turun, atau bahkan membuat efek fade in dan fade out.
1. Menyembunyikan dan Menampilkan Elemen
-
.hide() dan .show()
$("#sembunyi").click(function() {
$("#box").hide();
});
$("#tampil").click(function() {
$("#box").show();
});
Kita juga bisa menambahkan durasi dalam milidetik (ms):
$("#box").hide(1000); // hide selama 1 detik
$("#box").show(1000);
2. Efek Fade
Fade digunakan untuk membuat efek memudar.
-
.fadeIn() dan .fadeOut()
$("#fadein").click(function() {
$("#box").fadeIn();
});
$("#fadeout").click(function() {
$("#box").fadeOut();
});
-
.fadeToggle()
Efek toggle antara fadeIn dan fadeOut.
$("#fadetoggle").click(function() {
$("#box").fadeToggle();
});
3. Efek Slide
Slide sangat berguna untuk membuat menu dropdown atau konten yang bisa dibuka/tutup.
4. Contoh Lengkap HTML + jQuery
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Efek jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#box, #panel {
width: 200px;
height: 100px;
margin-top: 10px;
background-color: lightblue;
padding: 10px;
display: none;
}
</style>
</head>
<body>
<button id="sembunyi">Sembunyikan Box</button>
<button id="tampil">Tampilkan Box</button>
<button id="fadein">Fade In</button>
<button id="fadeout">Fade Out</button>
<button id="fadetoggle">Fade Toggle</button>
<button id="slideDown">Slide Down</button>
<button id="slideUp">Slide Up</button>
<button id="slideToggle">Slide Toggle</button>
<div id="box">Ini adalah Box</div>
<div id="panel">Ini adalah Panel</div>
<script>
$(document).ready(function() {
$("#sembunyi").click(function() {
$("#box").hide(500);
});
$("#tampil").click(function() {
$("#box").show(500);
});
$("#fadein").click(function() {
$("#box").fadeIn(500);
});
$("#fadeout").click(function() {
$("#box").fadeOut(500);
});
$("#fadetoggle").click(function() {
$("#box").fadeToggle(500);
});
$("#slideDown").click(function() {
$("#panel").slideDown(500);
});
$("#slideUp").click(function() {
$("#panel").slideUp(500);
});
$("#slideToggle").click(function() {
$("#panel").slideToggle(500);
});
});
</script>
</body>
</html>
Kesimpulan
Di artikel ini, kita telah mempelajari berbagai efek dan animasi yang disediakan oleh jQuery seperti hide(), show(), fadeIn(), slideDown() dan lainnya.
Di seri selanjutnya, kita akan membahas tentang Manipulasi Attribute dan Class di jQuery.
Terima Kasih