Langkah 1
Masukkan script jquery. Kalau anda ingin memasukkannya kedalam html file anda. Masukkan script ini di bagian <head>
<script src='http://code.jquery.com/jquery-1.6.2.js' type='text/javascript'></script>
Langkah 2
Lalu tambahkan script ini:
<script>
//<![CDATA[
$(document).ready(function(){
$('#gambar').hide();
$('#tombolbuka').click(function(){
$('#gambar').show('slow');
return false;
});
});
//]]>
</script>
Bagian script yang di tandai warna merah, dipergunakan ketika anda memasukkan script ini ke dalam blog. Jika dalam file html, tidak perlu di pergunakan bagian itu.
Langkah Terakhir
Langkah terakhir, membuat tombol dan gambar yang akan di tampilkan
<button id="tombolbuka">Buka Gambar</button>
<img border="0" height="320" id="gambar" src="http://inike.com/logojim.png" width="263" />
Animasi yang dapat kalian gunakan dalam Jquery:
slideDown
slideUp
show
hide
fadeIn
fadeOut
dll... dan masih banyak lagi....
smoga bermanfaat
wah, keren itu efeknya, hanya saya bingung cara merombaknya, gagal terus untuk di terapkan di blog saya....
BalasHapus