Pernah melihat menu yang ketika disorot menampilkan sub menu dengan animasi slide? pernah bertanya bagaimana cara membuatnya? sudah ketemu? sudah bisa? Pada artikel ini akan dibahas fungsi JQuery dasar sebelum melanjutkan ke pembahasan pembuatan menu drop down dengan animasi slide.
Sekarang, pelajari dulu dasar-dasarnya, berlatih terus menerus dan coba dimodifikasi sesuai kehendak hati. Kalau kesulitan, tanyakan pada ahlinya. Kalau sudah mahir, silahkan kembangkan ke fungsi yang lebih rumit. Langsung saja ke pembahasan.
Cara menggunakan fungsi slideDown() dan slideUp() pada JQuery adalah sebagai berikut.
ELemen yang akan diberi event, dalam hal ini menggunakan event hover
//perhatikan id yang digunakan
<div id="hover">Hover/sorot aku</div>
Tampilan/pesan ketika sudah dihover/disorot
//perhatikan id yang digunakan
<div id="msg">Terimakasih telah berkenan menyentuhku</div>
Script JQuery hover
//import file jQuery
<script type="text/javascript" src="sumber/jquery.js"></script>
<script type="text/javascript">
//agar jQuery bekerja ketika dokumen siap
$(document).ready(function(){
//menyembunyikan isi pesan
$('#msg').hide();
//memberi event hover pada id hover
$('#hover').hover(function(){
//memberi tugas pada id msg agar tampil dengan animasi slideDown
$('#msg').slideDown(300);
},
function(){
//menyembunyikan id msg ketika tidak dihover dengan animasi slideUp
$('#msg').slideUp(300);
});
});
</script>
Keterangan: fungsi slideDown() digunakan untuk menampilkan isi element HTML dengan animasi slideDown atau muncul sedikit demi sedikit secara horisontal, sedangkan fungsi slideUp() digunakan untuk menyembunyikan isi element HTML dengan animasi slideUp atau dengan cara hilang sedikit demi sedikit secara horisontal.
Contoh
