Efek Hover Pada Link dengan Jquery

Pertama, Kamu Harus Mengenal Namanya Hover, Hover adalah Perubahan Ketika Mouse di Arahkan Pada Konten yang di Beri Efek Hover. Ada Tiga Buah Efek Hover Pada Link yang Saya Share Kali Ini, di Antaranya:
1. Efek Warna-Warni Pada Link Saat di Hover
2. Efek Opacity atau Kabur Pada Link Saat di Hover
3. dan Efek Link yang Berjalan atau Nudging Saat di Hover

Efek Warna-Warni Pada Link Saat di Hover

Coba Lihat Semua Warna Link yang Ada di Blog http://.co.cc. Terus Perhatikan Warna Linknya Sebelum Kamu Hover, dan Perhatikan Lagi Warna Linknya Sesudah Kamu Hover. Pasti Efeknya Warnanya Warna-Warni, atau Kaya Pelangi Gitu...
Untuk Membuat Efek Warna-Warni Pada Link, Sederhana Banget Koq Langkahnya, Tinggal Letakkan Kode di Bawah Ini di Atas Kode ]]></b:skin>

<script src='http://densquare.googlecode.com/files/Efek%20Link%20Colour.js' type='text/javascript'/>

Efek Opacity atau Kabur Pada Link Saat di Hover

Contohnya, Buka Blog http://co.cc. Terus Lihat Semua Warna Link yang Ada di Blog Tersebut! Perhatikan Warna Linknya Sebelum Kamu Hover, dan Perhatikan Lagi Warna Linknya Sesudah Kamu Hover. Pasti Linknya Saat Kamu Hover Akan Memudar, Memudar Ini di Namakan Opacity...
Untuk Membuat Efek Opacity atau Kabur Pada Link, Tinggal Letakkan Kode di Bawah Ini di Bawah Kode <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
<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>

Efek Link yang Berjalan atau Nudging Saat di Hover

Contohnya, Arahkanlah Mouse Kamu Ke Beberapa Link di Bawah Ini

Wah!, Keren Khan? Nah Untuk Membuat Link dengan Efek Ini, Ada Dua Langkah:
Pertama, Untuk Meng-Instalnya. Letakkan Kode Script di Bawah Ini, di Bawah Kode <head>

<script src="http://densquare.googlecode.com/files/Efek%20Link%20Nudging.js" type="text/javascript"> </script> <script type="text/javascript"> $(document).ready(function() { $('#linkberjalan li').mouseover(function() { $(this).children().animate({paddingLeft:"50px"}, {queue:false, duration:600}); }).mouseout(function() { $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:600}); }); }); </script>

Kedua, dan Untuk Membuat Link Berjalan, Hanya dengan Mengubah Tulisan yang di Cetak Tebal dengan Ke Inginanmu, dan Letaknya Terserah, Sesuai dengan Ke Inginanmu.

<ul id="linkberjalan">
<li><a href="http://AlamatLinkmu">Nama Linkmu</a></li>
</ul>

Contoh:

<ul id="linkberjalan">
<li><a href="http://www.Rachmath.co.cc">Blognya Rachmath</a></li>
</ul>

Ok, Semoga Ketiga Efek Hover Pada Link dengan Jquery di Atas dapat Bermanfaat Ya. Jangan Lupa Komentarnya Ya.
Selamat mencoba

Author Description