Ahaaa......setelah googling serta nanya temen. ketemu juga cara membuat efek transparan pada gambar dengan menggunakan jQuery. Ceritanya aku ingin membuat perubahan tingkat opacity jika mouse on hover pada gambar. Awalnya ketemu dengan menggunakan CSS, namun koq rasanya kurang sreg soalnya animasinya terlalu cepat. Nah dengan jQuery ini efeknya lebih lambat.
Scriptnya begini (maen copas aja ah....)
$(document).ready(function() {
var opacity = 0.7, toOpacity = 0.9, duration = 250;
$('.kelas').css('opacity',opacity).hover(function() {
$(this).fadeTo(duration,toOpacity);
}, function() {
$(this).fadeTo(duration,opacity);
}
);
});
Pada script di atas bisa dilihat class .kelas, ini adalah class css dari gambar. Jadi maksudnya script ini ditujukan ke class .kelas.
Nah berhubung aku menggunakannya di Drupal, setelah menyimpan script tersebut misal nama filenya script.js (file javascript).
Berikutnya edit file themes yang extensinya .info dan tambahkan baris seperti dibawah:
scripts[] = js/script.js
Bisa dilihat file tersebut aku simpan didalam sebuah folder lagi dengan nama js. Setelah save jangan lupa clear cache pada web drupalnya. Semoga berhasil...
Sumber: davidwalsh.name
Kategori Blog: