Mengenal Effect JQuery Toggle, FadeToggle dan SlideToggle

Hallo guys, balik lagi nih ke web design atau web programmer ^-^

Sorry juga nih, akhir-akhir ini aku jarang update blog ini karena lagi sibuk kerjaan lain :"(

Disini saya akan bermain-main dengan Effect JQuery untuk desain web lebih dinamis ^-^

JQuery adalah sebuah library JavaScript. Dalam dunia pemrograman, library adalah kumpulan dari berbagai fungsi "Instan" untuk memudahkan pembuatan sebuah aplikasi. Dengan demikian, JQuery adalah kumpulan fungsi-fungsi JavaScript yang memudahkan penulisan kode JavaScript.

Penggunaan untuk effect pada JQuery sangat mudah dimengerti karena syntax-nya yang pendek, berikut adalah beberapa effect pada JQuery yang sering dipakai (standart)..

hide () → function effect JQuery untuk menyembunyikan element.
show () → function effect JQuery untuk menampilkan element.
toggle () → function effect JQuery untuk menampilkan dan menyembunyikan element.
fadeIn () → function effect JQuery untuk menampilkan element dengan efek memudar.
fadeOut () → function effect JQuery untuk menyembunyikan element dengan efek memudar.
fadeToggle () → function effect JQuery untuk menampilkan dan menyembunyikan element dengan efek memudar.
slideDown () → function effect JQuery untuk menampilkan element dengan efek slide.
slideUp () → function effect JQuery untuk menyembunyikan element dengan efek slide.
slideToggle () → function effect JQuery untuk menampilkan dan menyembunyikan element dengan efek slide.
animate () → function effect JQuery untuk membuat efek animasi pada element.

Jika kalian ingin melihat contoh script untuk fadeToggle () atau slideToggle () bisa diartikel saya sebelumnya, Tutorial Membuat Sosial Media DropDown Dengan HTML, CSS, & JQuery.

Nah, sekarang kita ke contoh scriptnya langsung aja biar lebih paham tentang Effect JQuery ^-^

Silakan coba kalian running script dibawah ini.. disini saya menggunakan fadeToggle ()

<!DOCTYPE html>
<html>
<head>
	<title>Mengenal Effect Pada JQuery</title>
	<script type="text/javascript" src="jquery.js"></script>
	<style media="screen">
	body{
	font-family: sans-serif;
	}

	h1{
	text-align: center;
	}

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

	#tombol,
	#tombol2,
	#tombol3{
	padding:10px;
	color: #fff;
	background: #34495E;
	border: none;
	}
	</style>
	
</head>
<body>
	<h1>
Effect pada JQuery | shareitcare.blogspot.com</h1>
<button id="tombol">Tampilkan kotak (fadeIn)</button>
	<button id="tombol2">Sembunyikan kotak (fadeOut)</button>
	<button id="tombol3">Effect fade Toggle kotak (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>

Coba kalian running script yang ini.. disini saya menggunakan effect slideToggle ()

<!DOCTYPE html>
<html>
<head>
	<title>Mengenal Effect Pada JQuery</title>
	<script type="text/javascript" src="jquery.js"></script>
	<style media="screen">
	body{
	font-family: sans-serif;
	}

	h1{
	text-align: center;
	}

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

	#tombol,
	#tombol2,
	#tombol3{
	padding:10px;
	color: #fff;
	background: #34495E;
	border: none;
	}
	</style>
	
</head>
<body>
	<h1>
Effect pada JQuery | shareitcare.blogspot.com</h1>
<button id="tombol">Tampilkan kotak (slideDown)</button>
	<button id="tombol2">Sembunyikan kotak (slideUp)</button>
	<button id="tombol3">Effect slide Toggle kotak (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>

Untuk mengatur kecepatan atau durasi pada effect fade bisa dengan script berikut..

<!-- Memberikan nilai slow dan fast pada parameter function -->
$('.box').fadeIn('slow');

<!-- Memberikan nilai slow dan fast pada parameter function -->
$('.box').fadeIn('fast');

<!-- Memberikan nilai berupa angka untuk durasi waktu effect -->
$('.box').fadeIn(1000);

Untuk script JQuery-nya seperti ini..

<script>
  $(".show-btn").click(function(){
    $(".sm-menu").fadeToggle("fast");
  });
</script>

Itulah cara menggunakan script JQuery dengan HTML dan CSS .. jika kalian sudah paham dengan dasar ini dan script bisa di running maka untuk function effect lainnya tidak akan ada masalah seperti hide (); show (); animate (); dls.

Oke deh guys, sampai sini dulu aja share saya hari ini, semoga bisa membantu temen-temen untuk belajar bahasa pemrograman ini ya, semoga bermanfaat ^-^

Note: Jika ada penulisan kata yang salah atau ada script error bisa komentar dibawah, mungkin ada tambahan juga boleh kok share di kolom komentar. Jangan lupa share ke temen-temen kalian juga ya ^-^

Mengenal Effect JQuery Toggle, FadeToggle dan SlideToggle - ShareItCare Blog

Post a Comment

1 Comments

Popular Posts

Mengenal QR Code dan Barcode, Apakah Mereka Sama? - ShareItCare Blog

Tutorial Membuat To - do list Menggunakan HTML, CSS, dan JQuery - ShareItCare Blog

Subscribe Us

Facebook

Tags

Scan Me !

Categories

Tags

Social Plugin

Most Recent

Recent in Code

Categories

Most Popular

Mengenal QR Code dan Barcode, Apakah Mereka Sama? - ShareItCare Blog

Tutorial Membuat To - do list Menggunakan HTML, CSS, dan JQuery - ShareItCare Blog

About Me

Social Widget

Mengenal Effect JQuery Toggle, FadeToggle dan SlideToggle - ShareItCare Blog

You may like these posts

Post a Comment

1 Comments

Popular Posts

Mengenal QR Code dan Barcode, Apakah Mereka Sama? - ShareItCare Blog

Tutorial Membuat To - do list Menggunakan HTML, CSS, dan JQuery - ShareItCare Blog

Subscribe Us

Facebook

Tags

Scan Me !

Categories

Tags

Social Plugin

Most Recent

Recent in Code

Categories

Most Popular

Mengenal QR Code dan Barcode, Apakah Mereka Sama? - ShareItCare Blog

Tutorial Membuat To - do list Menggunakan HTML, CSS, dan JQuery - ShareItCare Blog

About Me

Social Widget