jQuery

Belajar jQuery Part 3 : Memahami Effect serta Cara Membuatnya

Halo salam jumpa kembali di pertemuan yang ke-3 di sesi belajar jQuery. Pada pertemuan ini saya akan mengulas tentang Memahami Efek Pada jQuery.

Fungsi efek, merupakan fungsi dari JavaScript yang kemudian dirangkum menjadi fungsi jQuery sehinggua memudahkan dalam penggunaannya.

Penggunaan efek pada jQuery sangat mudah digunakan, karena jQuery memiliki syntax yang pendek dan pastinya mudah dimengerti, berikut ini beberapa efek pada jQuery.

  • show()
    Efek jQuery yang berfungsi untuk menampilkan element
  • hide()
    Efek jQuery yang berfungsi untuk menyembunyikan element
  • toggle()
    Efek jQuery yang berfungsi untuk menampilkan atau menyembunyikan element
  • fadeIn()
    Efek jQuery yang berfungsi untuk menampilkan element dengan efek memudar
  • fadeOut()
    Efek jQuery yang berfungsi untuk menyembunyikan element dengan efek memudar
  • fadeToggle()
    Efek jQuery yang berfungsi untuk menampilkan atau menyembunyikan dengan efek memudar
  • slideUp()
    Efek jQuery yang berfungsi untuk menyembunyikan element dengan efek slide
  • slideDown()
    Efek jQuery yang berfungsi untuk menampilkan element dengan efek slide
  • slideToggle()
    Efek jQuery yang berfungsi untuk menampilkan atau menyembunyikan element dengan efek slide
  • animate()
    Efek jQuery yang berfungsi untuk membuat sebuah efek animasi pada element

Masing – masing efek pada jQuery memiliki fungsinya, kamu dapat pahami sendiri, dan sekarang kita mulai latihan untuk membuat beberapa efek jQuery.

Baca: Mengenal Dasar jQuery.


Tutorial Membuat Efek show() & hide() pada jQuery

Seperti biasa, kita akan latihan membuat efek jQuery dimulai dari urutan show() dan hide(), yang harus disiapkan index.html dan style.css. Silahkan teman – teman buat dulu ke-2 file itu dan jangan lupa hubungkan dengan file jquery.js nya. Dibawah ini saya sudah menulis contoh index.html dan style.css, berikut cara penulisannya.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Tutorial belajar JQuery Part 3 : Memahami Efek serta Cara Membuatnya</title>	
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Belajar Fungsi Efect pada JQuery | www.irvannurfazri.com</h1>
	<button id="tombol">Tampilkan</button>
	<button id="tombol2">Sembunyikan</button>
	<div class="box"></div>
</body>
<script type="text/javascript">
	$(document).ready(function(){
		$('#tombol').click(function(){
			$('.box').show();
		});

		$('#tombol2').click(function(){
			$('.box').hide();
		});
	});
</script>
</html>

Save file dengan nama index.html

kemudian file style.css

body{
	font-family: sans-serif;
}

h1{
	text-align: center;
}

.box{
	height: 300px;
	width:300px;
	background: blue;
	display: none;
}

#tombol,
#tombol2{
	padding:10px;
	color: #fff;
	background: #000;
	border: none;
}

Save dengan nama style.css jangan lupa semua file index.html, style.css dan file jquery-3.3.1.js satukan dalam satu folder.

Sebelum dijalankan, saya akan menerangkan sedikit cara kerja dari kode program diatas.

Disini saya membuat 2 buah tombol diberi tanda id(#) yang pertama #tombol1 dan #tombol2. Kemudian kita beri event, sebelumnya kita pernah belajar memahami event dan selector. Nah event ini berfungsi jika element tombol yang kita buat kemudian diklik maka akan merespon sesuai dengan fungsi efek tersebut. Terdapat pada kode program bagian ini.

$('#tombol').click(function(){
	$('.box').show();
});

$('#tombol2').click(function(){
	$('.box').hide();
});

Kemudian diantara kode ini berfungsi untuk menampilkan box.

$('.box').show();

Dan yang ini, untuk menyembunyikan box.

$('.box').hide();

Bagaimana paham? Baik saya anggap teman – teman sudah paham. Gambar dibawah ini adalah hasil dari kode tersebut.

Cara Membuat Efek hide() & show() pada jQuery - IRVAN GEN
Cara Membuat Efek hide() & show() pada jQuery – IRVAN GEN

Tutorial Membuat Efek toggle() pada jQuery

Setelah berhasil membuat efek show dan hide mari kita lanjut dengan efek toggle, toggle berfungsi untuk menampilkan atau menyembunyikan element.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Tutorial belajar JQuery Part 3 : Memahami Efek serta Cara Membuatnya</title>	
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Belajar Fungsi Efect pada JQuery | www.irvannurfazri.com</h1>
		<button id="tombol">Tampilkan/Sembunyikan</button>	
	<div class="box"></div>
</body>
<script type="text/javascript">
	$(document).ready(function(){
		$('#tombol').click(function(){
			$('.box').toggle();
		});		
	});
</script>
</html>

style.css

body{
	font-family: sans-serif;
}

h1{
	text-align: center;
}

.box{
	height: 300px;
	width:300px;
	background: blue;
	display: none;
}

#tombol,
#tombol2{
	padding:10px;
	color: #fff;
	background: #000;
	border: none;
}

Ada sedikit perbedaan dengan fungsi efek sebelumnya, jika efek show() dan hide() menggunakan 2 buah tombol, kalau ini menggunakan 1 tombol namun berfungsi untuk 2 efek sekaligus karena kita menggunakan fuction toggle().

<script type="text/javascript">
	$(document).ready(function(){
		$('#tombol').click(function(){
			$('.box').toggle();
		});		
	});
</script>

Hasilnya..

Cara Membuat Efek toggle_1 pada jQuery - IRVAN GEN
Cara Membuat Efek toggle_1 pada jQuery – IRVAN GEN

Berfungsi dengan demikian.

Cara Membuat Efek toggle_2 pada jQuery - IRVAN GEN
Cara Membuat Efek toggle_2 pada jQuery – IRVAN GEN

Tutorial Membuat Efek fadeIn() dan fadeOut() pada jQuery

Langsung saja kita menulis kode programnya.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Tutorial belajar JQuery Part 3 : Memahami Efek serta Cara Membuatnya</title>	
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Belajar Fungsi Efect pada JQuery | www.irvannurfazri.com</h1>
<button id="tombol">Tampilkan (fadeIn)</button>
	<button id="tombol2">Sembunyikan (fadeOut)</button>
	<button id="tombol3">Effect slide Toggle (fadeToggle)</button>
	<div class="box"></div>
</body>
<script type="text/javascript">
	$(document).ready(function(){
		$('#tombol').click(function(){
			$('.box').fadeIn();
		});

		$('#tombol2').click(function(){
			$('.box').fadeOut();
		});

		$('#tombol3').click(function(){
			$('.box').fadeToggle();
		});
	});
</script>
</html>

style.css

body{
	font-family: sans-serif;
}

h1{
	text-align: center;
}

.box{
	height: 300px;
	width:300px;
	background: blue;
	display: none;
}

#tombol,
#tombol2,
#tombol3{
	padding:10px;
	color: #fff;
	background: #000;
	border: none;
}

Hasilnya

Cara Membuat Efek Fade pada jQuery - IRVAN GEN
Cara Membuat Efek Fade pada jQuery – IRVAN GEN

Cara Memberi Durasi Efek Fade pada jQuery

Kamu bisa memberi waktu durasi untuk efek fade dengan cara memasukan nilai pada parameter fuction, seperti, slow dan fast. Berikut contohnya.

slow

$('.box').fadeIn('slow');

fast

$('.box').fadeIn('fast');

Bisa juga dengan memberi nilai berupa angka untuk durasi waktunya, contohnya.

$('.box').fadeIn(500);

Teman – teman bisa lihat contoh penulisan kode program untuk memberi durasi waktu pada efek fade.

<!DOCTYPE html>
<html>
<head>
	<title>Tutorial belajar JQuery Part 3 : Memahami Efek serta Cara Membuatnya</title>	
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Belajar Fungsi Efect pada JQuery | www.irvannurfazri.com</h1>
        <button id="tombol">Tampilkan kotak (fadeIn)</button>
	<button id="tombol2">Sembunyikan kotak (fadeOut)</button>
	<button id="tombol3">Effect slide Toggle kotak (fadeToggle)</button>
	<div class="box"></div>
</body>
<script type="text/javascript">
	$(document).ready(function(){
		$('#tombol').click(function(){
			$('.box').fadeIn(800);
		});
 
		$('#tombol2').click(function(){
			$('.box').fadeOut('fast');
		});
 
		$('#tombol3').click(function(){
			$('.box').fadeToggle(500);
		});
	});
</script>
</html>

style.css

body{
	font-family: sans-serif;
}

h1{
	text-align: center;
}

.box{
	height: 300px;
	width:300px;
	background: blue;
	display: none;
}

#tombol,
#tombol2,
#tombol3{
	padding:10px;
	color: #fff;
	background: #000;
	border: none;
}

Tutorial Membuat Efek slideUp() dan slideDown() pada jQuery

Untuk membuat efek slide sangat mudah, sama seperti membuat efek show dan hide jadi kamu hanya tinggal fungsi efeknya saja. Contohnya seperti ini.

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Tutorial belajar JQuery Part 3 : Memahami Efek serta Cara Membuatnya</title>	
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Belajar Fungsi Efect pada JQuery | www.irvannurfazri.com</h1>
	<button id="tombol">Tampilkan (slideDown)</button>
	<button id="tombol2">Sembunyikan (slideUp)</button>
	<button id="tombol3">Effect slide Toggle (slideToggle)</button>
	<div class="box"></div>
</body>
<script type="text/javascript">
	$(document).ready(function(){
		$('#tombol').click(function(){
			$('.box').slideDown();
		});

		$('#tombol2').click(function(){
			$('.box').slideUp();
		});

		$('#tombol3').click(function(){
			$('.box').slideToggle();
		});
	});
</script>
</html>

style.css

body{
	font-family: sans-serif;
}

h1{
	text-align: center;
}

.box{
	height: 300px;
	width:300px;
	background: blue;
	display: none;
}

#tombol,
#tombol2,
#tombol3{
	padding:10px;
	color: #fff;
	background: #000;
	border: none;
}

Hasilnya dapat dicek sendiri..


Penutup

Mungkin itu saja yang dapat saya sampaikan di pertemuan ini, tentang Memahami Effect jQuery serta Cara Membuatnya. Jika kurang mengerti atau salah dalam penulisan maupun penyampaian, silahkan diskusikan di form komentar, semoga apa yang sudah kita pelajari dapat bermanfaat bagi kita semua.

Terimakasih.

Written by Irvan Nurfazri
No one can bring you true happiness except Allah. Founder Hobigame.net Instagram : ig.com/irvan_gen Profile

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *