Smooth Fade In / Out Button Menggunakan jQuery

Di beberapa project lalu, klien 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.

Katakanlah 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;
}

note: 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:

1. .hover() : menjalankan fungsi saat mouse dalam keadaan mouse in dan mouse out terhadap elemen tertentu
2. .css() : mengeset CSS elemen tertentu. Dalam kasus ini adalah mengatur nilai opacity menjadi 0
3. .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.

Itu saja, praktis bukan? Lengkapnya:

Markup HTML

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

CSS

#smoothbutton{
float:left;
width:189px;
height:46px;
text-indent:-99999em;
margin:50px;
background:url(button.png) no-repeat;
}

#smoothbutton span{
float:left;
width:189px;
height:46px;
text-indent:-99999px;
background:url(button.png) 0 -46px no-repeat;
}

jQuery

$(document).ready(function(){
$("#smoothbutton").wrapInner("<span>");
$("#smoothbutton span").css('opacity', 0);
$("#smoothbutton span").hover(function(){$(this).fadeTo("medium", 1);}, function(){$(this).fadeTo("medium", 0)});
});

Lebih lengkapnya lagi, anda bisa cek demonya disini.

Selamat mencoba dan semoga bermanfaat 🙂