Cotetan

Inspiration Start Here

Gallery

Loading...

jQuery animate() Effect

Tidak ada komentar
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:
  • swing
  • linear
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>

Tidak ada komentar :

Posting Komentar

Langganan: Posting Komentar ( Atom )