donjuanhose81
17.Mart.2015, 22:51
Merhaba arkadaşlar;
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>
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>