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:
%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:
%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?!
11 replies on “Efek warna memudar pada link dengan jQuery”
Sippp mantap boss…
Lanjutkan…
Ditunggu tips n triks jQuery selanjutnya…
๐
yes! sudah bisa mas.. saya baru tahu pas baca ini (http://itx.web.id/wordpress/menggabungkan-jquery-dan-blog-wordpress-kita/) hha.. makasih banyak ya. bagus banget mas tulisan2nya…
(yahoo) (yahoo) (yahoo) (yahoo) (yahoo)
mas, koq kalo di blog saya widget like button FB-nya seperti yang ada di bawah blog ini. gak gerak animasi jquery-nya. gimana biar button-nya kayak yang di bagian ata yang dapat berfungsi dg baik??
fb-like khn gak pake jquery (thinking)
terus kalo mau buat link memudarnya juga saya gak bisa mas. ๐ kenapa ya… mohon penjelasnannya mas buat tata letak kode2nya… ๐
jquerynya udah di-load belum?
udah mas, pake kode ini sama di header.php-nya kalo mau naro javascript kayak diatas di file apa pak ya?
terimakasih banyak mas balasannya. (yahoo)
blog indo jarang yg bahas jQuery ya bozz
wah.. entahlah (thinking)
mas, aku ijin copas ya buat aku jadiin postingan juga, ntar aku kasih copyright nya kok mas, boleh ya? ๐
dipake boleh, dicopas jangan ๐