Mari berkreasi lagi dengan script jQuery. Kali ini kita akan bermain-main dengan efek smooth fade (memudar) pada image. Efek jQuery ini bisa digunakan untuk berbagai keperluan, bisa untuk header, icon atau bagian-bagian lainnya yang berbasis gambar. Ketika kita menelusuri dunia maya, mungkin ada diantara sahabat blogger yang menemukan sebuah header atau icon dengan efek lembut ketika mouse hover. Animasi yang ditampilkan sangat lembut, seakan-akan gambar mengalami perubahan komposisi baik itu warnanya, bentuknya atau latarnya. Perubahan komposisi ini tidak tampak layaknya pergantian gambar slide namun gambar tampak benar-benar mengalami perubahan pada dirinya sendiri. Padahal, sebenarnya gambar tersebut memang diganti dengan gambar lain namun dengan proses pergantian yang sangat lembut (smooth), efek perubahan ini sering di sebut dengan efek fade pada jQuery (efek memudar ini selanjutnya kita sebut fade saja).
Gambar kesatu digunakan untuk memanipulasi link dengan posisi sebagai background, sedangkan gambar kedua (gambar pengganti) yang berada diatas gambar kesatu disembunyikan terlebih dahulu. Ketika pointer mouse berada diatas link (hover) maka gambar kedua akan ditampilkan secara lembut dengan efek .fadeIn() sehingga gambar ke satu akan tertutupi. Jika pointer mouse meninggalkan area gambar maka gambar kedua akan disembunyikan secara lembut dengan efek .fadeOut(), sedangkan gambar kesatu akan terlihat lagi. Jika bingung dengan penjelasan diatas (berarti sama dengan saya), silahkan lihat demo-nya dibawah ini agar semangat untuk mempelajari dan mempraktekannya.
Skenario HTML
Perhatikan skenario HTML dibawah ini. Saya membuat sebuah kontener div dengan class fader. Didalam kontener fader tersebut terdapat dua buah elemen, yaitu anchor hyperlink dan span. Anchor hyperlink berisi gambar kesatu (dideskripsikan pada CSS) dan span yang berisi gambar kedua (dideskripsikan juga didalam CSS). Sehingga skenario HTML saya tulis seperti dibawah ini:
<div class="fader">
<a href="#">
<span>jQuery Image Fader</span>
</a>
</div>
Skenario CSS
Skenario CSS dibawah ini digunakan sebagai lokasi penempatan gambar. Terdiri dari dua deskripsi class yaitu .fader a yang berisi gambar kesatu sebagai latar dan .fader span yang berisi gambar kedua sebagai gambar pengganti saat mouse hover. Sedangkan property lainnya silahkan disesuaikan dengan kebutuhan anda. Gambar yang saya gunakan hanya satu file dengan dimensi 400 x 400 pixel, sehingga property CSS untuk width adalah sama yaitu 400px baik pada class .fader a maupun pada class .fader span. Begitu juga untuk property height, nilai tingginya sama yaitu 200px. Kenapa height 200px sedang dimensi gambar secara keseluruhan 400 x 400 pixel? Hal ini karena menggunakan metode sprite, sehingga jarak 0-200 pixel digunakan sebagai gambar kesatu yang berfungsi sebagai latar, sedangkan jarak 200-400 pixel digunakan sebagai gambar kedua yang berfungsi untuk pengganti saat mouse hover.
.fader a{
background:url(fader.png) no-repeat 0 0;
margin:0 auto;
height:200px;
position:absolute;
width:400px;
text-indent:-9999px;
overflow: hidden;
}
.fader span{
height:200px;
position:absolute;
width:400px;
background:url(fader.png) no-repeat 0 -200px;
display:none;
top:0;
left:0;
cursor:pointer;
}
Skenario jQuery
Script jQuery dibawah ini digunakan untuk mengatur penampilan gambar kedua. Gambar ke dua akan tampil jika pointer mouse berada diatas gambar kesatu. Gambar kedua akan di sembunyikan saat pointer mouse meninggalkan gambar kesatu. Penampilan dan penyembunyian gambar kedua dilakukan melalui efek fade. Untuk proses menampilkan gambar diberi efek .fadeIn(), untuk menyembunyikan gambar diberi efek .fadeOut(). Waktu penampilan dan penyembunyian gambar kedua di atur selama 400 milidetik. Maka skenario jQuery ditulis seperti dibawah ini:
$(document).ready(function(){
$('.fader a').hover(function(){
$(this).find('span:hidden').fadeIn(400);
},function(){
$(this).find('span').fadeOut(400);
});
});
Penjelasan Kode jQuery
Dibawah ini penjelasan mengenai masing-masing baris script jQuery yang digunakan.$(document).ready(function(){
Pemuatan akan dimulai jika dokumen sudah siap...$('.fader a').hover(function(){
Mencari dan menyeleksi achor yang ada di dalam kontener fader. Jika pointer mouse diatas (hover) gambar kesatu maka fungsi dimulai...
$(this).find('span:hidden').fadeIn(400);
Mencari tag span didalam kontener fader anchor (.fader a) yang berisi gambar kedua, kemudian akan ditampilkan dengan efek .fadeIn(). Gambar dari tersembunyi hingga tampil di set selama 400 milidetik. span:hidden hanya untuk memastikan bahwa gambar kedua dalam keadaan tersembunyi sebelum ditampilkan.
},function(){
Fungsi menampilkan gambar kedua dengan efek .fadeIn() ditutup. Fungsi berikutnya akan bekerja jika posisi pointer mouse keluar dari area gambar...
$(this).find('span').fadeOut(400);
Mencari tag span didalam kontener fader anchor (.fader a) yang berisi gambar kedua, kemudian akan disembunyikan dengan efek .fadeOut(). Gambar dari tampil hingga tersembunyi di set selama 400 milidetik.
});Fungsi hover ditutup
});Fungsi jQuery ditutup
Kesimpulan
Ketika skenario diatas; HTML, CSS dan jQuery membutuhkan pemahaman, bukan hanya sekedar copy paste, karena materi ini merupakan dasar untuk penguasaan script-script jQuery yang lebih kompleks. Ini merupakan studycase untuk memahami tentak efek fade pada jQuery. Agar bisa memahami teknik manipulasi jQuery maka sebaiknya anda memahami properti bahasa CSS (Cascading Style Sheet) terlebih dahulu. Selamat belajar dan selamat mencoba. Semoga berhasil... Happy Blogging :)
Pranala Luar:
