Minggu, 21 November 2010

Tutorial Website :: Teknik Animasi Dasar Dengan JQuery

Posted by Bayu Idham Fathurachman Label: , , | 0 komentar



Akhirnya posting lagi,setelah googling sana-sini dan baca tutorial juga contoh-contoh script JQuery,saya makin sayang aja sama library yang satu ini :D.Tutorial kali ini adalah tentang teknik animasi dasar menggunakan JQuery.
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>

<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.

Simak Juga Tutorial Lainnya:

Proggraming

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)