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 ๐Ÿ™‚

5 thoughts on “Smooth Fade In / Out Button Menggunakan jQuery

  1. 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 ๐Ÿ˜€

    1. Haha, memang baru aktif lagi setelah sekian lama. Itu selalu ada demo-nya kok. Nanti kita desain lagi deh agar lebih terlihat tombol demonya ๐Ÿ™‚

  2. eh udah ada ding. hahaha. maap maap. kurang jelas sih tulisan `demo` nya ๐Ÿ˜† ๐Ÿ˜ณ

  3. 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. ๐Ÿ™

    1. 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 ๐Ÿ™‚

Share Your Thought