J QUERY : Memunculkan & Menghilangkan
J Query??? Pada tahu belum, apa
itu J Query, nah J Query adalah kumpulan
kode/fungsi Javascript siap pakai, sehingga mempermudah kita untuk membuat kode
Javascript atau dalam kesimpulannya jQuery menyederhanakan kode Javascript.
Sekarang saya akan berbagi ilmu tentang J Query bertema
Memunculkan dan Menghilangkan item – item yang terdapat di WEB, langsung yuk
praktek!!!
Hasil akan seperti pada gambar diatas
Buka text editor anda, kemudian
ketikkan syntax dibawah ini, atau COPAS jika anda malas mengetik, untuk scriptnya bisa didownload disini
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Anwari</title>
<script src="anwari.js"> //anwari.js : script yang harus didownload
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<body bgcolor="#999933">
<p>Coba aja sendiri,klik button di bawah ini
!!!</p>
<button>Klik Saya!</button>
<br><br>
<div id="div1"
style="border:solid 2px
#000;width:170px;height:170px;background-color:red;"></div>
<br>
<div id="div2"
style="border:solid 2px
#000;width:170px;height:170px;background-color:white;"></div>
<br>
<div id="div3"
style="border:solid 2px #000;width:170px;height:170px;
background-image:url(2.jpg)"></div>
</body>
</body>
</html>
Nah jika sudah simpan dengan fadeinout.html atau terserah dengan nama apa aja yang penting harus berekstensi .html
Nah jika sudah simpan dengan fadeinout.html atau terserah dengan nama apa aja yang penting harus berekstensi .html
0 Komentar:
Posting Komentar