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:
.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.
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 
AMYunus
16 January 2011
yeay! outstando mulai aktif lagi
*ato gue yang ketinggalan info yak?
btw untuk masukan aja. sekalian dikasih demo nya mas
jadi biar ada gambaran, maksud dari kodingan ini secara visual seperti apa.
Trims
fikrirasyid
17 January 2011
Haha, memang baru aktif lagi setelah sekian lama. Itu selalu ada demo-nya kok. Nanti kita desain lagi deh agar lebih terlihat tombol demonya
AMYunus
16 January 2011
eh udah ada ding. hahaha. maap maap. kurang jelas sih tulisan `demo` nya
Ardianzzz
27 January 2011
Mungkin ada baiknya “dibackup” dengan CSS3? wkwk, aneh ya, backup kok pakai CSS3…
Sekedar mengantisipasi pada browser yang mematikan JavaScript mungkin?
Sebenarnya sayang sekali kalau harus menggunakan jQuery untuk memunculkan efek semacam itu. Padahal CSS sudah bisa meskipun masih tahap eksperimental.
fikrirasyid
01 February 2011
Kalau saya take it or leave it sih. Jarang sekali memikirkan kondisi jika js dimatikan. Hari gini siapa yang browsing sambil mematikan javascript?
Buat saya menggunakan jQuery asalkan mayoritas user tertangani, there’s no problem