Efek Hover Gambar Artistik dengan JQuery

Apa yang dimaksud dengan efek hover gambar artistik? Coba letakkan pointer mousemu pada gambar di halaman ini »
Untuk membuat efek seperti itu, yang kita butuhkan hanya JQuery. Saya ajarkan caranya di sini:

• Pertama-tama, salinlah script di bawah ini, kemudian letakkan di atas kode </head>:
  
  

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

  
  Nah, yang barusan kita lakukan adalah meletakkan mesinnya. Khusus untuk script di atas, jika ternyata templatemu sudah memilikinya, kamu tidak perlu lagi menambahkannya, satu template cukup satu mesin saja. Namun seperti halnya di alam nyata, sebuah mesin tidak akan bekerja tanpa adanya remot pengendali. Untuk itu, sertakanlah komponen pengendali ini dan letakkan tepat di bawah kode tadi:
  
  

  <script type='text/javascript'>
  $(document).ready(function() {
      $('img').hover(function() { //masuk
          $(this).animate({ opacity: "0.3" }, 1000);
      }, function() { //keluar
          $(this).animate({ opacity: "1" }, 1000);
      });
  });
  </script>

  
  Selesai. Klik Simpan Template kemudian lihat hasilnya. Sekarang kita masuk ke tahap pemahaman lebih lanjut.

Pemahaman Lebih Lanjut

• Sebuah remot pengendali (sebut saja begitu) dapat memiliki tiga buah tugas penting, yaitu menentukan APA yang diberi efek, SEPERTI APA efek yang diberikan dan SECEPAT APA efek itu bekerja.
• Perhatikan kode img yang nyungsep di antara kode '. Itu adalah selektor dalam CSS yang berarti GAMBAR. Oleh karena itu, tutorial ini sebenarnya tidak mutlak hanya memberlakukan efek pada gambar saja. Kamu juga bisa mengganti kode img tersebut menjadi a misalnya, untuk memberikan efek transparasi pada semua link (tautan). - [APA]
• opacity adalah properti dalam CSS yang akan dianimasikan oleh mesin ini. - [SEPERTI APA]
• 1000 adalah tingkat kecepatan perubahan nilai efek (dalam hal ini adalah: opacity/transparasi). Coba saja ganti nilai itu dan lihat perbedaan kecepatannya. - [SECEPAT APA]

Pemakaian JQuery dalam blog tentu saja memiliki sebuah resiko, yaitu blog menjadi bertambah lambat ketika diakses. Namun itu cuma sedikit saja. Atau jika kamu ingin membuat efek hover yang lebih ringan, kamu bisa baca tutorialnya di sini.