Efek blur tranparansi yang ditampilkan menggunakan Opacity jQuery
ternyata lebih halus jika dibanding dengan Opacity CSS, dan sepertinya
juga support di semua browser, asalkan pada browsernya tetap mengaktifkan Enable
Javascript lho ya hehehe. Untuk melihat contoh efek gambar yang dihasilkan
jQuery silahkan langsung aja ke Blog baru saya
Free Blogger Templates
Gallery.
OK, langsung ke tutorial saja ya...
Buka halaman Edit HTML kemudian letakan script dibawah ini di bawah kode
]]></b:skin>
<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".efekanimasi").fadeTo("slow", 1.0); // This sets
the opacity of the thumbs to fade down to 30% when the page loads
$(".efekanimasi").hover(function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity to 100% on
hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to
30% on mouseout
});
});
</script>
Contoh manual memasang efeknya pada gambar :
<img class="efekanimasi"
src="url alamat gambar"/>
Sebenarnya ada cara lain yang lebih mudah dimana kita bisa langsung
mengaktifkan efek gambar ini disemua image pada halaman posting. Caranya, copy
paste aja script dibawah ini, dan letakan saja dibawah kode
]]></b:skin> atau dibawah script yang sudah
kita masukan sebelumnya.
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0); // This sets the
opacity of the thumbs to fade down to 30% when the page loads
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity to 100% on
hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to
30% on mouseout
});
});
</script>
Good Luck :)
