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 :
12
Günlük :
100
Haftalık :
335
Aylık :
1130
Copyright © 2010 İşbara Alp Sönmez – Programlama Örnekleri. Her hakkı saklıdır. www.alpsonmez.com Bu sitedeki herhangi bir içeriğin, "herhangi bir sitede veya forumda" iznim dışında paylaşım yapılması durumunda hukuki dava açacağımı tarafınıza arz ederim. "Öğrenciler dilediği gibi kullanabilir."