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 :$(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 : - backgroundPosition
- borderWidth
- borderBottomWidth
- borderLeftWidth
- borderRightWidth
- borderTopWidth
- borderSpacing
- margin
- marginBottom
- marginLeft
- marginRight
- marginTop
- outlineWidth
- padding
- paddingBottom
- paddingLeft
- paddingRight
- paddingTop
- height
- width
- maxHeight
- maxWidth
- minHeight
- maxWidth
- font
- fontSize
- bottom
- left
- right
- top
- letterSpacing
- wordSpacing
- lineHeight
- textIndent
|
| speed | Opsional. Menentukan kecepatan elemen muncul dari hidden ke visible. Defaultnya adalah 0. Nilainya bisa berupa: - milliseconds (contoh : 1500)
- "slow"
- "normal"
- "fast
|
| 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