Tutorial Belajar jQuery Part 17: Cara Membuat Efek Show dan Hide jQuery

Selain efek-efek dasar JavaScript, seperti menambahkan elemen atau memanipulasi kode CSS, jQuery juga menyediakan berbagai efek visual menarik lainnya. Kali ini kita akan membahas Cara Membuat Efek Show dan Hide elemen HTML dengan jQuery.


Membuat Efek Show dan Hide dengan jQuery

Efek show adalah efek memunculkan sebuah element HTML secara perlahan, sedangkan efek hide kebalikan dari show, yakni menyembunyikan sebuah element HTML dengan perlahan. Untuk membuat kedua efek ini kita bisa menggunakan method show() dan hide() jQuery.

Langsung saja kita masuk ke dalam contoh praktek dari kedua method ini:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Duniailkom</title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
 
     $("#tombol_hide").click(function() {
       $("#box").hide();
     })
 
     $("#tombol_show").click(function() {
       $("#box").show();
     })
 
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
     background-color: pink;
     border: 2px solid black;
   }
   </style>
</head>
<body>
<h2>Belajar jQuery Duniailkom</h2>
<button id="tombol_hide">Hide</button>
<button id="tombol_show">Show</button>
<br><br>
<div id="box"></div>
</body>
</html>

Contoh Cara Membuat Efek Show dan Hide HTML dengan jQueryDisini saya memiliki sebuah box <div id="box"> yang sudah dihiasi dengan CSS. Ketika tombol Hide di klik, akan dijalankan perintah: $("#box").hide(). Akibatnya, kotak pink hilang, ketika tombol Show di klik, perintah $("#box").show() akan mengembalikan lagi kotak tersebut.

Silahkan anda coba sendiri dari link codepen dibawah ini:

See the Pen Cara Membuat Efek Show dan Hide dengan jQuery by duniailkom (@duniailkom) on CodePen.10206

Tapi tunggu dulu, kenapa efeknya cepat sekali?

jQuery juga mengizinkan kita untuk mengatur kecepatan animasi efek show() dan hide(). Caranya dengan menambahkan salah satu keyword: "slow" atau "fast" sebagai argumen method ini, seperti contoh berikut:

$("#box").hide("slow");

Untuk pengaturan yang lebih detail, kita bisa menginput angka dalam satuan milisecond, seperti:

$("#box").hide(1000);

Ini artinya efek hide akan membutuhkan waktu 1 detik (1000 milisecond) untuk selesai. Berikut contoh perubahannya pada kode program sebelumnya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Duniailkom</title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
 
     $("#tombol_hide").click(function() {
       $("#box").hide(1000);
     })
 
     $("#tombol_show").click(function() {
       $("#box").show(1000);
     })
 
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
     background-color: pink;
     border: 2px solid black;
   }
   </style>
</head>
<body>
<h2>Belajar jQuery Duniailkom</h2>
<button id="tombol_hide">Hide</button>
<button id="tombol_show">Show</button>
<br><br>
<div id="box"></div>
</body>
</html>

See the Pen Cara Membuat Efek Show dan Hide dengan jQuery 2 by duniailkom (@duniailkom) on CodePen.10206

Sekarang, efek hide dan show berjalan dengan lebih pelan.

Dapat juga anda perhatikan bahwa efek hide() ini dijalankan dengan cara menyembunyikan element HTML ke sudut kiri atas.


Method toggle() jQuery

Selain method hide() dan show(), jQuery masih memiliki method toggle() yang berfungsi sebagai gabungan efek hide dan show. Method ini akan menyembunyikan (hide) element HTML jika saat ini sedang muncul, atau memunculkan (show) element tersebut jika saat ini tersembunyi.

Berikut contoh penggunaannya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Duniailkom</title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
 
     $("#tombol").click(function() {
       $("#box").toggle("slow");
     })
 
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
     background-color: pink;
     border: 2px solid black;
   }
   </style>
</head>
<body>
<h2>Belajar jQuery Duniailkom</h2>
<button id="tombol">Hide/Show</button>
<br><br>
<div id="box"></div>
</body>
</html>

See the Pen Cara Membuat Efek Show dan Hide dengan jQuery 3 by duniailkom (@duniailkom) on CodePen.10206

Silahkan anda klik tombol Hide/Show, kotak box akan bergantian dari hide ke show dan sebaliknya.

Masih berhubungan dengan efek jQuery, dalam tutorial berikutnya kita akan mempelajari Cara Membuat Efek Fade untuk elemen HTML menggunakan jQuery.

24 Comments

  1. Edkim
    15 May 16
    • Andre
      17 May 16
  2. samidi
    15 Feb 17
    • Andre
      17 Feb 17
      • aris
        10 May 19
  3. Wahabi Putra
    28 Mar 17
  4. Bustomi
    11 May 17
    • Andre
      11 May 17
  5. Rifqi Khairul
    22 Jun 17
  6. Rifqi
    22 Jun 17
    • Andre
      22 Jun 17
  7. Bayu
    27 Sep 17
    • Andre
      24 Mar 18
  8. firman
    23 Mar 18
    • Andre
      24 Mar 18
  9. Frendy Santoso
    27 Jun 18
    • Andre
      28 Jun 18
  10. fatih
    03 Jul 18
    • Andre
      04 Jul 18
  11. FIORAYHAN
    22 Dec 18
  12. Ratu
    03 Feb 20
  13. imsan
    05 Feb 20
    • imsan
      05 Feb 20

Add Comment

Leave a Reply to Rifqi Khairul Cancel reply