Jquery animate metodu ile animasyonlar oluşturma

Animate metodu ile css fonksiyonları ile animasyonlar oluşturabiliriz.
.animate( properties [, duration] [, easing] [, complete] )  şeklinde kullanılır.


Properties ---> özellikler
Duraiton ---> süre
Easing ---> görsellik
Complete ---> bittiğinde yapılacaklar

 

<script type="text/javascript">
$(function(){ 
$(".nesne")
.animate({ "width" : "100px",}, 1000) //genişiliği 100px yaptı 
.animate({ "height" : "100px",}, 1000)  //yüksekliği 100px yaptı
.animate({ "marginLeft" : "300px",}, 2000)// soldan 300px kaydırdı
.animate({ "marginTop" : "300px",}, 2000) //yukardan 300px asagı
kaydırdı
.animate({ "marginTop" :"0px",},1000)
});
</script>


<style>
.nesne { width:150px; height:20px; float:left; background:#066; color:#FFF;}    
</style>

<div class="nesne">Nesne </div>

 

Programın Çıktısı

Nesne

Mesaj ve Yorumlar

Yorum Sayısı (0)

ÜYE YORUMLARI

Çevrimiçi :
7
Günlük :
166
Haftalık :
1008
Aylık :
4150
Copyright © 2012 İşbara Alp Sönmez – Programlama Örnekleri. Her hakkı saklıdır. www.alpsonmez.com Bu sitedeki herhangi bir içeriğin, herhangi bir sitede iznim dışında paylaşım yapılması durumunda hukuki dava açacağımı tarafınıza arz ederim.