Untuk membuat animasi fadein dan fadeout di jQuery, kita dapat menggunakan function fadeIn() dan fadeOut(). Berikut akan dijalskan langkah-langkahnya
- Tentukan div yang akan dianimasikan dan juga controlnya :
<button id=”tampil”>Tampilkan</button>
<button id=”sembunyi”>Sembunyikankan</button>
<div id=”kutipan”>
The LORD bless you and keep you,<br/>
the LORD make his face shine on you and be gracious to you,<br/>
the LORD turn his face toward you and give you peace.
</div> - Script untuk animasinya adalah :
$(function(){
$(‘#tampil’).bind(‘click’,function(){
$(‘#kutipan’).fadeIn();
});$(‘#sembunyi’).bind(‘click’,function(){
$(‘#kutipan’).fadeOut();
});});
- Coding lengkapnya :
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title>Show dan Hide dengan fade</title>
<script src=”development-bundle/jquery-1.6.2.js”>
</script>
<script>
$(function(){
$(‘#tampil’).bind(‘click’,function(){
$(‘#kutipan’).fadeIn();
});$(‘#sembunyi’).bind(‘click’,function(){
$(‘#kutipan’).fadeOut();
});});
</script>
</head>
<body>
<button id=”tampil”>Tampilkan</button>
<button id=”sembunyi”>Sembunyikankan</button>
<div id=”kutipan”>
The LORD bless you and keep you,<br/>
the LORD make his face shine on you and be gracious to you,<br/>
the LORD turn his face toward you and give you peace.
</div>
</body>
</html> - Demo dapat dilihat di http://aris.proweb.asia/show_hide_fade.html .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.
Animasi fadeIn dan fadeOut di jQuery