Jquery Ders-19 .animate() Kullanımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery Ders-19 .animate() Kullanımı

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(4420)
RAPOR ET
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.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol