Efek Hover Gambar Artistik Dengan Jquery

Published by Concept Phone Jumat, 20 Juli 2018

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

• Pertama-tama, salinlah script di bawah ini, lalu letakkan di atas isyarat </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 yakni meletakkan mesinnya. Khusus untuk script di atas, jikalau ternyata templatemu sudah memilikinya, kau tidak perlu lagi menambahkannya, satu template cukup satu mesin saja. Namun ibarat halnya di alam nyata, sebuah mesin tidak akan bekerja tanpa adanya remot pengendali. Untuk itu, sertakanlah komponen pengendali ini dan letakkan sempurna di bawah isyarat 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 lalu lihat hasilnya. Sekarang kita masuk ke tahap pemahaman lebih lanjut.

Pemahaman Lebih Lanjut

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

Pemakaian JQuery dalam blog tentu saja mempunyai sebuah resiko, yaitu blog menjadi bertambah lambat saat diakses. Namun itu cuma sedikit saja. Atau jikalau kau ingin menciptakan imbas hover yang lebih ringan, kau sanggup baca tutorialnya di sini.
Sumber https://www.dte.web.id/