Efek warna memudar pada link dengan jQuery

Sudah jamak dipakai efek hover saat mouse diletakkan di atas sebuah link. Cara paling sederhana adalah menggunakan CSS yaitu dengan menggunakan deklarasi :hover. Sekarang kita akan membuat efek hover ini lebih manis, yaitu dengan menggunakan jQuery. Saat mouse diletakkan di atas link, warnanya akan berubah, kemudian saat mouse dikeluarkan dari atas link tersebut warnanya akan memudar perlahan menuju ke warna asal.

Demo:

Link 1

Link 2

Link 3

%CODE1%

The Oldschool

Efek hover menggunakan CSS. Efek sederhana ini yang paling sering digunakan. Ketika mouse masuk dan mouse keluar dari link, warna akan berubah.

[sourcecode language=”css”]<style type="text/css">
#oldschool a{color:#999}
#oldschool a:hover{color:red}
</style>[/sourcecode]

Padanannya dengan jQuery:

Tanpa CSS, warna-warna tersebut langsung dimasukkan dalam script menggunakan method .css()

[sourcecode language=”javascript”]<script type="text/javascript">
$(function(){
$(‘#oldschool a’).hover(
function(){$(this).css(‘color’,’red’)},
function(){$(this).css(‘color’,’#999′)});
};
</script>[/sourcecode]

Dengan menggunakan CSS, warna-warna didefinisikan dalam CSS, lalu manipulasinya menggunakan method .addClass() dan .removeClass().

[sourcecode language=”javascript”]<style type="text/css">
#oldschool a, .moout {color:#999}
.moin {color:red}
</style>
<script type="text/javascript">
$(function(){
$(‘#oldschool a’).hover(
function(){$(this).addClass(‘moin’).removeClass(‘moout’)},
function(){$(this).addClass(‘moout’).removeClass(‘moin’)})
};
</script>[/sourcecode]

Demo:

Link 1

Link 2

Link 3

%CODE2%

The Effect

Efek ini menggunakan plugin jQuery Color jadi pastikan plugin itu juga dimuat di halaman ybs. Jika menggunakan wordpress, cukup menambahkan baris <?php wp_enqueue_script('jquery-color');?> pada file template kita.

Tanpa CSS, yaitu dengan memasukkan warnanya langsung ke dalam script.

[sourcecode language=”javascript”]<script type="text/javascript">
$(function(){
$(‘#contoh a’).hover(
function(){$(this).stop().css({‘color’:’red’})},
function(){$(this).stop().animate({‘color’:’#999′},500)}) });
</script>[/sourcecode]

Menggunakan CSS, scriptnya akan mengambil warna dari CSS yang didefinisikan di luar script itu sendiri. Cara ini akan memudahkan merubah-rubah warna hanya dengan mengubah CSSnya, tidak perlu melihat ke script ini.

Karena efek .animate() pada jquery tak dapat mengambil nilai dari CSS secara langsung, maka kita buat dummy tag untuk mengambil warna dari CSS.

[sourcecode language=”javascript”]<style type="text/css">
#dummyin, .moin {color:red}
#dummyout, .moout, #contoh a {color:#999}
</style>
<script  type="text/javascript">
$(function(){
var moin=$(‘#dummyin’).css(‘color’);
var moout=$(‘#dummyout’).css(‘color’);
$(‘#contoh a’).hover(
function(){$(this).stop().css({‘color’:moin})},
function(){$(this).stop().animate({‘color’:moout},500)});
});
</script>
<div id="dummyin" class="in"></div>
<div id="dummyout" class="out"></div>
[/sourcecode]

Saksikan efek ini pada link di website ini dan semua blog yang memakai theme-theme buatan itx.

Jadi lebih cantik bukan?!