Animasi Gambar Opacity Memakai Jquery

Postingan kali ini bahu-membahu cuman memperbaiki tutorial sebelumnya mengenai tranparansi gambar memakai CSS Opacity. Kok memperbaiki, emang ada yang salah ya? sejujurnya gak ada kok, masalahnya hanya pada tampilan di browser..dimana CSS opacity ternyata kurang begitu berjalan dengan baik pada beberapa browser versi jadul, salah satunya di IE6. Selain itu imbas animasi yang ditampilkan juga kurang begitu mantap dan terlihat kasar.  Nah sayang banget tuh punya imbas animasi gambar yang ok tapi gak support di browser lawas, untuk itu kali ini aku coba mengenalkan imbas animasi yang lain menggunakan Opacity via jQuery.

Efek blur tranparansi yang ditampilkan memakai Opacity jQuery ternyata lebih halus kalau dibanding dengan Opacity CSS, dan tampaknya juga support di semua browser, asalkan pada browsernya tetap mengaktifkan Enable Javascript lho ya hehehe. Untuk melihat pola imbas gambar yang dihasilkan jQuery silahkan eksklusif aja ke Blog gres saya Free Blogger Templates Gallery.

OK, eksklusif ke tutorial saja ya...

Buka halaman Edit HTML lalu letakan script dibawah ini di bawah isyarat ]]></b:skin>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.efekanimasi&quot;).fadeTo(&quot;slow&quot;, 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(&quot;.efekanimasi&quot;).hover(function(){
$(this).fadeTo(&quot;slow&quot;, 0.6); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo(&quot;slow&quot;, 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 gampang dimana kita dapat eksklusif mengaktifkan imbas gambar ini disemua image pada halaman posting. Caranya, copy paste aja script dibawah ini, dan letakan saja dibawah isyarat ]]></b:skin> atau dibawah script yang sudah kita masukan sebelumnya.

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.post img&quot;).fadeTo(&quot;slow&quot;, 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(&quot;.post img&quot;).hover(function(){
$(this).fadeTo(&quot;slow&quot;, 0.6); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo(&quot;slow&quot;, 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>

Good Luck :)

Bagikan Artikel ini