Animasi speed di jQuery – PT Proweb Indonesia

Kita dapat menambahkan animasi speed di jQuery dengan memasukkan paramater kecepatan. Sebagai contoh untuk function show dan hide yang telah kita bahas sebelumnya.

Pertama-tama kita siapkan div yang akan dianimasikan dan juga button untuk mengontrolnya:

<button id="tampil">Tampilkan</button>&nbsp;
<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>

Kemudian kita tambahkan parameter speed seperti contoh berikut :
$(function(){
    $(‘#tampil’).bind(‘click’,function(){
        $(‘#kutipan’).show(‘slow’);
    });
    $(‘#sembunyi’).bind(‘click’,function(){
        $(‘#kutipan’).hide(‘slow’);
    });

});
Coding lengkapnya :
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title>Show dan Hide dengan speed</title>
<script src=”development-bundle/jquery-1.6.2.js”>
</script>
<script>
$(function(){
    $(‘#tampil’).bind(‘click’,function(){
        $(‘#kutipan’).show(‘slow’);
    });
    $(‘#sembunyi’).bind(‘click’,function(){
        $(‘#kutipan’).hide(‘slow’);
    });

});

</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>
Demonya silahkan dilcoba di http://aris.proweb.asia/show_hide_speed.html .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

Animasi speed di jQuery