jQuery animate() Effect
Mengubah suatu elemen dari satu keadaan ke keadaan yang lainnya. Keadaan yang diubah ini berdasarkan CSS.
Nilai properti CSS yang berubah secara berangsur-angsur, hal ini untuk menciptakan efek animasi.
Nilai properti CSS yang bisa diubah adalah nilai bertipe angka, baik satuannya pixel atau persen (%). Untuk tipe string tidak bisa dianimasikan.
Sintaks :
Nilai properti CSS yang berubah secara berangsur-angsur, hal ini untuk menciptakan efek animasi.
Nilai properti CSS yang bisa diubah adalah nilai bertipe angka, baik satuannya pixel atau persen (%). Untuk tipe string tidak bisa dianimasikan.
Sintaks :
$(selector).animate(styles,speed,easing,callback) | Parameter | Penjelasan |
|---|---|
| Styles | Wajib. Menentukan properti CSS dan nilainya yang akan di-animasi. Properti CSS yang bisa di-animasi :
|
| speed | Opsional. Menentukan kecepatan elemen muncul dari hidden ke visible. Defaultnya adalah 0. Nilainya bisa berupa:
|
| easing | Opsional. Menentukan fungsi easing yang diset pada speed animasi. Built in fungsi easing adalah:
|
| callback | Opsional. Suatu fungsi yang akan dijalankann apabila efek show selesai dijalankan. |
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".tombol1").click(function(){
$("#box").animate({height:"300px"});
});
$(".tombol2").click(function(){
$("#box").animate({height:"100px"});
});
});
</script>
</head>
<body>
<div id="box"
style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
<button class="tombol1">Animasi</button>
<button class="tombol2">Reset</button>
</body>
</html>
Comments
Post a Comment