Tutorial Belajar jQuery Part 19: Cara Membuat Efek Slide dengan jQuery

Setelah efek Show, Hide, Fadein dan Fadeout, dalam tutorial belajar jQuery kali ini kita akan membahas cara membuat efek Slide dengan jQuery.


Membuat Efek Slide dengan jQuery

Efek slide adalah efek kemunculan sebuah elemen HTML dengan cara turun dari atas kebawah. Untuk membuat efek ini, jQuery menyediakan 2 buah method: slideUp() dan slideDown().

Seperti yang bisa ditebak, method slideUp() digunakan untuk menyembunyikan element (naik ke atas), sedangkan method slideDown() digunakan untuk memunculkan element (turun ke bawah), tentunya dengan efek sliding.

Untuk mengontrol kecepatan efek, kita bisa menggunakan keyword “slow”, “fast”, atau angka sebagai argumen method ini (dalam satuan milisecond).

Berikut contoh penggunaan efek slide di dalam jQuery:

<!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_slide_up").click(function() {
       $("#box").slideUp("slow");
     })
 
     $("#tombol_slide_down").click(function() {
       $("#box").slideDown("fast");
     })
 
   });
   </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_slide_up">SlideUp</button>
<button id="tombol_slide_down">SlideDown</button>
<br><br>
<div id="box"></div>
</body>
</html>

Contoh Cara Membuat Efek Slide dengan jQuery

Contoh kali ini masih sama seperti contoh yang saya gunakan dalam tutorial show dan fade sebelumnya, dimana saya memiliki sebuah box pink dan dengan 2 tombol: SlideUp dan SlideDown.

Ketika tombol SlideUp di klik, efek slideup akan dijalankan melalui perintah $(“#box”).slideUp(“slow”). Box pink akan ‘naik’ secara perlahan.

Ketika SlideDown di klik, edek slidedown akan menurunkan box pink dengan cepat. Ini dilakukan dari perintah $(“#box”).slideDown(“fast”).

Anda bisa mencobanya melalui link codepen dibawah ini:

See the Pen Cara Membuat Efek Slide dengan jQuery 1 by duniailkom (@duniailkom) on CodePen.10206


Method slideToggle() jQuery

Masih sama seperti efek jQuery sebelumnya, jQuery juga menyediakan method slideToggle() yang berfungsi sebagai gabungan dari method slideUp() dan slideDown(). Kedua efek ini akan dijalankan secara bergantian.

Langsung saja kita lihat contoh prakteknya:

<!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").slideToggle("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">Slide!</button>
<br><br>
<div id="box"></div>
</body>

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

Pada saat tombol Slide! Di klik, perintah $(“#box”).slideToggle(“slow”) akan memeriksa status dari box saat ini. Jika sedang tampil, lakukan slideUp. Jika box sudah tidak ada, lakukan slideDown.

Dalam tutorial jQuery kali ini kita telah membahas cara penggunaan efek slide di dalam jQuery, yang bisa dilakukan menggunakan 3 method: slideUp, slideDown, dan slideToggle. Berikutnya, saya akan membahas efek yang tak kalah menarik, yakni membuat animasi dengan jQuery.


Tutorial Terkait:

9 Comments

  1. ady
    24 May 16
    • Andre
      26 May 16
  2. Mastenk
    11 Jul 16
    • Andre
      13 Jul 16
  3. Achmad Maulana
    18 Nov 16
  4. Andri
    06 Feb 17
    • Andre
      07 Feb 17
  5. wira
    20 Mar 17
    • Andre
      20 Mar 17

Add Comment