Belajar jQuery Part 5 : Membuat Toggle Dan Efek slide dengan jQuery
MENGGUNAKAN EFFECT TOOGLE JQUERY
Effect toggle adalah efect untuk menampilkan dan menyembunyikan element .
Perhatikan contoh dibawah .
CARA MENGGUNAKAN EFEK SLIDE JQUERY
Untuk membuat efek slide jQuery sama dengan membuat efek toggle di atas , untuk lebih jelasnya perhatikan contoh berikut .
Effect toggle adalah efect untuk menampilkan dan menyembunyikan element .
Perhatikan contoh dibawah .
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Belajar jQuery Part 5 : Mengenal toggle JQuery</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<h1>Effect Pada JQuery<br>
<a href="http://www.bimablctelkom.com">bimablctelkom.com</a></h1>
<button id="tombol">Tampilkan / Sembunyikan Kotak</button>
<div class="box">
<h2 style="color: white">Inilah salah satu kelebihan dari JQuery</h2>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#tombol').click(function(){
$('.box').toggle();
});
});
</script>
</html>
CARA MENGGUNAKAN EFEK SLIDE JQUERY
Untuk membuat efek slide jQuery sama dengan membuat efek toggle di atas , untuk lebih jelasnya perhatikan contoh berikut .
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Belajar Javascript Part 5 : Mengenal Effect JQuery</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<h1>Effect Pada JQuery<br>
<a href="http://www.bimablctelkom.com">bimablctelkom.com</a></h1>
<button id="tombol">Tampilkan Kotak (SlideDown)</button>
<button id="tombol2">Sembunyikan Kotak (SlideUp)</button>
<button id="tombol3">Effect Slide Toogle 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>
No comments