July 24, 2024

Efek Fade In Fade Out Objek dengan Jquery

2 min read

Halo warga PalComTech, kali ini mari sama-sama belajar jQuery dasar tentang efek fade in dan fade out pada sebuah objek. Bagi kalian yang belum mengenal apa itu jQuery silahkan klik disini untuk kenalan terlebih dahulu. Kalau sudah kenalan mari simak detail langkah-langkah berikut ini.

Langkah 1

Download terlebih library di http://jquery.com, silahkan pilih versi jQuery yang diinginkan, misalnya Development, kemudian klik tombol download, nanti nama file yang terdownload adalah jQuery-1.4.js. Berikut contoh hasil projek yang akan kita buat :

Langkah 2

Simpan file jquery-1.4.js pada folder latihan Anda, kemudian buat dokumen baru yang isinya berikut ini.

[sourcecode languege=”html”]
<html>
<head>
<title>Belajar jQuery</title>
</head>
<body>
</body>
</html>
[/sourcecode]

Sebaiknya gunakan editor seperti Dreamweaver atau web editor lain, karena ketika Anda membuat dokumen HTML yang baru, kode-kode diatas akan terbentuk secara otomatis, jadi kita tidak perlu mengetiknya secara manual.

Langkah 3

Selanjutnya panggil library jQuery diatara tag <head> … </head>, maka sekarang skripnya menjadi seperti dibawah ini.

[sourcecode languege=”html”]
<html>
<head>
<title>Belajar jQuery</title>
<script type=”text/jacascript”> src=”jquery-1.4.js”></script>
</head>
<body>
</body>
</html>
[/sourcecode]

Langkah 4

Sebagai contoh, kita akan membuat dua buah tombol yang akan mengotrol sebuah foto, contoh skripnya adalah sebagai berikut.

[sourcecode languege=”html”]
<html>
<head>
<title>Belajar jQuery</title>
<script type=”text/jacascript”> src=”jquery-1.4.js”></script>
</head>
<body>
</body>
<button class="sembunyi">Sembunyikan</button>
<button class="tampil">Tampilkan</button>
<p><img id="foto" src="donita.jpg"></p>
</html>
[/sourcecode]

Langkah 5

Selanjutnya buat skrip jQuery dan sesuaikan dan sesuaikan dengan id atau class yang telah kita definisikan pada langkah 4. Skrip selengkapnya adalah sebagai berikut.

[sourcecode languege=”html”]
<html>
<head>
<title>Belajar jQuery</title>
<script type=”text/jacascript”> src=”jquery-1.4.js”></script>
<script>
$(document).ready(function(){
$(".sembunyi").click(function(){
$("#foto").hide("slow");
});
$(".tampil").click(function(){
$("#foto").show("slow");
});
});
</script>
</head>
<body>
</body>
<button class="sembunyi">Sembunyikan</button>
<button class="tampil">Tampilkan</button>
<p><img id="foto" src="donita.jpg"></p>
</html>
[/sourcecode]

Selanjutnya simpan filenya misalnya dengan nama tes_jquery.html dan untuk menjalankanya silahkan langsung klik 2x pada nama filenya melalui Windows Explorer, setelah itu klik tombol Sembunyikan dan Tampilkan.

Hasil akhir

Bagaimana teman-teman menarik bukan hasilnya ?. Bagi yang mau mencoba silahkan download sorcenya dibawah ini.

[download id=”589″]

0 thoughts on “Efek Fade In Fade Out Objek dengan Jquery

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.