Smooth Fade In / Out Button Menggunakan jQuery

Di beberapa project , teman saya meminta agar kondisi hover menu yang ada di situsnya dibuat muncul secara smooth / perlahan-lahan. Setelah googling dan beberapa ujicoba, ternyata hal ini dapat dilakukan via jQuery dengan mudah.

bisa digunakan markup-nya seperti ini:

<a href="#" id="smoothbutton">This is button</a>

Lalu styling-nya (kondisi tidak di-hover) seperti ini:

#smoothbutton{

float:left;

width:189px;

height:46px;

text-indent:-99999em;

margin:50px;

background:url(button.png) no-repeat;

}

catatan: text-nya dihilangkan dengan text-indent negative dan gambar link-nya dibuat dengan image.

Load jQuery. Untuk tutorial ini saya me-load jQuery via CDN-nya Google:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>

Setelah jQuery di load, langkah selanjutnya adalah fungsi ini:

$("#smoothbutton").wrapInner("<span>");

Tugasnya adalah menyelipkan tag <span> di dalam <a> sehingga menjadi <a href="#" id="smoothbutton"><span>This is button</span></a>. span ini disiapkan untuk menjadi tampilan saat di-hover. Setelah diselipkan fungsi diatas, siapkan styling dalam kondisi ter-hover-nya:

#smoothbutton span{

float:left;

width:189px;

height:46px;

text-indent:-99999px;

background:url(button.png) 0 -46px no-repeat;

}

Setelah kondisi normal dan hover disiapkan, saatnya fungsi untuk melakukan “hover”-nya disiapkan. Pada dasarnya, ada 3 API jQuery yang akan bekerja:

• .hover() : menjalankan fungsi saat mouse dalam keadaan mouse in dan mouse out terhadap elemen tertentu
• .css() : mengeset CSS elemen tertentu. Dalam kasus ini adalah mengatur nilai opacity menjadi 0
• .fadeTo() : mengeset nilai opacity elemen yang ditargetkan

Prakteknya, ketiga API ini dibuat menjadi seperti ini:

$("#smoothbutton span").css('opacity', 0);

“Hilangkan” #smoothbutton span dengan mengatur opacity-nya menjadi 0 saat haalaman selesai di-load.

$("#smoothbutton span").hover(function(){$(this).fadeTo("medium", 1);}, function(){$(this).fadeTo("medium", 0)});

Saat #smoothbutton span di-hover, munculkan elemen dengan menaikkan opacity-nya menjadi 1 dengan kecepatan medium, dan saat mouse tidak lagi meng-hover, kembalikan nilai opacity menjadi 0 dengan kecepatan medium.