Cara menggunakan fungsi fadeIn() dan fadeOut() 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">Horee!! Aku berhasil membuat fadeIn() dan fadeOut()</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').fadeIn(600);
},
function(){
//menyembunyikan id msg ketika tidak dihover dengan animasi slideUp
$('#msg').fadeOut(600);
});
});
</script>
Keterangan: fungsi fadeIn() digunakan untuk menampilkan isi element HTML dengan animasi fadeIn atau terlihat sediki demi sedikit dengan pengurangan alpa/transparansi sesuai dengan angka yang ditentukan pada argumen. dalam hal ini, penambahan tersebut 600ms fadeIn(600). Sedangkan fungsi fadeOut() digunakan untuk menyembunyikan isi element HTML dengan animasi fadeOut atu menyembunyikan secara sedikit demi sedikit dengan penambahan alpha sesuai yang ditentukan pada argumen fungsi. dalam hal ini 600ms fadeOut(600).
ms dalam hal ini berarti milisecond atau milidetik.
Contoh
