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

The Oldschool

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

<style type="text/css">
   #oldschool a{color:#999}
   #oldschool a:hover{color:red}
</style>

Padanannya dengan jQuery:

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

<script type="text/javascript">
$(function(){
   $('#oldschool a').hover(
      function(){$(this).css('color','red')},
      function(){$(this).css('color','#999')});
};
</script>

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

<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>

Demo:

Link 1

Link 2

Link 3

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.

<script  type="text/javascript">
$(function(){
   $('#contoh a').hover(
      function(){$(this).stop().css({'color':'red'})},
      function(){$(this).stop().animate({'color':'#999'},500)}) });
</script>

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.

<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>

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

Jadi lebih cantik bukan?!

Hal yang juga menarik:

Hak Cipta

Semua skrip dan teknik dalam artikel di itx.web.id boleh digunakan sebagaimana kehendakmu tanpa perlu mencantumkan sumber. Kamu tidak boleh mengkopi seluruh artikel, dalam Bahasa Indonesia ataupun diterjemahkan ke dalam bahasa lain.

Related Articles:

• Menggabungkan jQuery dan blog WordPress kita:

Artikel terkait:

• Menggabungkan jQuery dan blog WordPress kita: