Jangan berharap animasi yang saya hasilkan sekarang akan terlihat wah.Karena saya hanya memberikan sedikit tutorial dasar.Namun kiranya cukup untuk pembekalan dasar belajar JQuery.Ayo kita mulai ..
Bila anda belum memiliki library JQuery , silahkan download terlebih dahulu disini.
Buat halaman html dengan menambahkan library JQuery,bingung ?Perhatikan kode dibawah ini
<html>
<head>
<title>Teknik Animasi Dasar</title>
<script type="text/javascript" src"libraryJqueryAnda"></script>
</head>
<body>
</body>
<html>
Simpan dengan nama latihanAnimasi.html.Ingat,library jquery yang sudah anda download,harus berada satu folder dengan file html tersebut.
Animasi yang kita buat adalah efek show-hide dan fadeIn-fadeOut menggunakan 4 buah tombol dan satu buah gambar sebagai media tampilan animasi.
Tambahkan code berikut pada latihanAnimasi.html diantara tag<body></body>
Tambahkan code berikut pada latihanAnimasi.html diantara tag<body></body>
<input type="button" id="hideButton" value="hide"/>
<input type="button" id="showButton" value="show"/>
<input type="button" id="fadeOutButton" value="fadeOut"/>
<input type="button" id="fadeInButton" value="fadeIn"/>
<img src="gambarAnda.jpg"/>
<script type="text/javascript">
$(document).ready(function(){
$('#hideButton').click(function(){
$('img').hide();
});
$('#showButton').click(function(){
$('img').show();
});
$('#fadeOutButton').click(function(){
$('img').fadeOut();
});
$('#fadeInButton').click(function(){
$('img').fadeIn();
});
});
</script>Hasilnya sebagai berikut
Seperti itulah hasilnya kira-kira.Sekian untuk postingan kali ini.Terimaksih sudah mampir dan sampai bertemu pada tutorial selanutnya.
0 komentar:
Posting Komentar