JQuery Link Hover Efek Opacity

Link hover adalah saat cursor mouse berada diatas link. Kebanyakan link hover dibedakan dari warna ataupun yang lain, supaya mudah membedakan apakah cursor mouse tepat berada diatas link tersebut atau belum. Tapi diartikel ini Nano akan berbagi tentang link hover dengan menggunakan JQuery dengan efek opacity.

Kalau ingin lihat demonya Template N2y Eksperiment

Masukan kode ini dibawah </b:skin>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Kalau kode diatas sudah ada, tidak perlu dimasukan lagi !!!

Masukan kode ini dibawah </b:skin>

<script type='text/javascript'> $(document).ready(function() { $('a').hover(function() { //mouse in $(this).animate({ opacity: '0.3' } , 1000); }, function() { //mouse out $(this).animate({ opacity: '1' }, 1000); }); }); </script>

Dibawah ini adalah penjelasan dari kode diatas:

• $('a') Kode disamping dengan huruf a akan memicu semua link terkena efek opacity.
• opacity: '0.3' Kode disamping dengan angka 0.3 adalah untuk membuat link hover transparan, semakin kecil angkanya semakin transparan, semakin transparan semakin asyik...
• 1000 Kode disamping adalah kecepatan ke efek opacity, semakin besar semakin lambat, semakin lambat...(huss dosa...)

Semoga Bermanfaat...

Alhamdulilllah