Jquery serimizin bu dersinde
.animate() methodu işleyeceğiz.Animate animasyon yapmamıza yarayan bir method.Bu methodun işleyişi şu şekilde.objemizin genişliği 100px deyelim.genişliği 200px olsun diyip bir saniye gireriz.Saniye boyunca belirtiğimiz genişliğe gelecektir.Tüm css kodları için böyle değişimleri yapabiliriz.
Css3 kodları buna dahil deil.Css3 kodlarını daha desteklemiyo bu özellik.Css3 için jquery pluginleri mevcut.Şimdi kodumuzun iskelet yapısına bakalım.
.animate({kolar},süre,function(){bitim işlemleri})
Son parametre zorunlu değil.Eğer animasyon bitince işlem yapacaksanız kullanırsınız.
Süre milisaniye cinsinden yazacaz 1 saniye = 1000 oluyo.
$("#alan").animate({
width:"100px",
color:"red"
},2000);
Yukarda idi alan olan tagımızın boyutu 100px rengi kırmızı olsun dedim 2 saniyede.
Arda arda animate kullanırsanız başta bitince diğeri başlar.
Genel örnek :
<!DOCTYPE html>
<html lang="en">
<head>
<title>cArleone</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(".alan").animate({
marginLeft:"300px"
},500).animate({
marginTop:"100px",
width:"200px"
},1000,function(){
alert("bitti");
})
})
</script>
<style type="text/css">
.alan{width:100px;height:100px;background:red;}
</style>
</head>
<body>
<div class="alan"></div>
</body>
</html>
Yukardaki örnekte bir kutu var önce soldan sağa gelecek sonra aşağı inergen genişleyecek.Animate ile güzel animasyonlar yapabilirsiniz.
Not : Dikkat etmeniz gereken direk css isimlarini yazmayın.İçin - olan kodların tiresini kaldırıp baş harflerini büyültün.
UstaDerslik
