Efek Pada Element Dengan jQuery

Beberapa unsur efek untuk menampilkan dan menyembunyikan suatu elemen dengan JQuery ini sangat mirip dengan efek yang diterapkan Scriptaculous.

Cukup sederhana tetapi dapat menghasilkan efek yang lumayan bagus.


Ada delapan fungsi yang digunakan untuk mengontrolnya:

show() dan hide() menampilkan dan menyembunyikan elemen secara sederhana
fadeIn() dan fadeOut() menampilkan dan menyembunyikan elemen secara memudar
slideDown() dan slideUp() menampilkan dan menyembunyikan elemen dengan efek geser
toggle() status item swap, jika sampel tersembunyi dan sebaliknya
slideToggle() melakukan hal yang sama tetapi dengan efek geser

Untuk menggunakannya, kita harus menentukan dua hal penting, yaitu elemen untuk menerapkan efek dan link untuk menjalankan fungsi. Keduanya harus diidentifikasi dengan unique ID, Seperti contoh:

<div id="dahe_ugi"> .......Isi atau Konten Disini....... </div>
<a href="javascript:void(0);" id="Dahe"><code>Show</code></a>
<a href="javascript:void(0);" id="Ugi"><code>Hide</code></a>

Dan Fungsi yang digunakan akan menjadi seperti ini:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
  $("#Dahe").click(function () { $("#dahe_ugi").show(); });
  $("#Ugi").click(function () { $("#dahe_ugi").hide(); });
});
//]]>
</script>

Dengan jenis sintaks yang sama, kita bisa menggunakan efek lainnya, seperti:

$("#Dahe").click(function () { $("#dahe_ugi").fadeIn(); });
$("#Ugi").click(function () { $("#dahe_ugi").fadeOut(); });

$("#Dahe").click(function () { $("#dahe_ugi").slideDown(); });
$("#Ugi").click(function () { $("#dahe_ugi").slideUp(); });

Dan dalam kasus toggle, ini hanya membutuhkan sebuah instruksi seperti contoh berikut:

$("#Ugi").click(function () { $("#dahe_ugi").toggle(); });

atau:

$("#Ugi").click(function () { $("#dahe_ugi").slideToggle(); });


Demonstrasi

Show Hide

Selesai, semoga bermanfaat.