Tutorial Belajar jQuery Part 19: Cara Membuat Efek Slide dengan jQuery
23 Apr 16 | | Tutorial 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 jQueryEfek 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 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() jQueryMasih 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. |
Cara menggunakan SLIDUP pada JavaScript
Pos Terkait
Copyright © 2024 toptenid.com Inc.
