Efek .show() dalam JQuery

.show()

Digunakan untuk menampilkan elemen.

Syntax:

.show(“durasi”, “callback”)

Keterangan:

  • durasi adalah string atau angka yang menentukan kecepatan elemen ditampilkan.
  • callbak adalah sebuah fungsi yang dipanggil setelah animasi selesai.

Contoh:

Buatlah satu file HTML bernama show.html dan isi dengan kode seperti dibawah ini:

<html>
<head>
<title>Efek Show() JQuery</title>
<script language=”javascript” src=”jquery-1.4.2.js”></script>
<script language=”javascript”>
$(document).ready(function(){
$(“#tampil”).click(function(){
$(“div”).show();
})
});
</script>
</head>
<body>
<input type=”button” value=”Tampilkan Tulisan” id=”tampil”/>
<div style=”display:none”>
a2fahmi.com menyediakan kursus JQUERY.
</div>
</body>
</html>

Keterangan:

  • style=”display:none”, digunakan untuk menyembunyikan elemen.
  • $(“#tampil”).click(function(), kode ini berarti saat elemen yang mempunyai id=”tampil” diklik maka fungsi didalamnya dieksekusi.
  • $(“div”).show(), kode ini digunakan untuk menampilkan elemen <div>

Hasil:

Buka file show.html dari browsermu, maka akan tampil tombol seperti gambar dibawah ini:

Klik tombol diatas maka akan tampil tulisan dibawah ini:

a2fahmi.com menyediakan kursus JQUERY.

Argumen Durasi

Syntax:

.show(“durasi”)

Keterangan:

Ketika argumenĀ “durasi” diberikan maka efek .show() menjadi metode animasi.

Durasi bertipe string mempunyai 3 nilai, yaitu:

  • fast yaitu kecepatannya adalah 200 milisecond
  • normal yaitu kecepatannya adalah 400 milisecond
  • slow yaitu kecepatannya adalah 600 milisecond

Durasi bertipe angka ditentukan dengan satuan milisecond.

Contoh:

Rubahlah file show.html menjadi seperti dibawah ini:

<html>
<head>
<title>Efek Show() JQuery</title>
<script language=”javascript” src=”jquery-1.4.2.js”></script>
<script language=”javascript”>
$(document).ready(function(){
$(“#tampil”).click(function(){
$(“div”).show(‘slow’);
})
});
</script>
</head>
<body>
<input type=”button” value=”Tampilkan Tulisan” id=”tampil”/>
<div style=”display:none”>
a2fahmi.com menyediakan kursus JQUERY.
</div>
</body>
</html>
Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura’.

You may also like...

Leave a Reply

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