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 π
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 π
Haha, memang baru aktif lagi setelah sekian lama. Itu selalu ada demo-nya kok. Nanti kita desain lagi deh agar lebih terlihat tombol demonya π
eh udah ada ding. hahaha. maap maap. kurang jelas sih tulisan `demo` nya π π³
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. π
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 π