JQuery Animasyonlar


Webmaster Genel   

Yazar: ByClxon    1 Yorum    125 Görüntüleme
  • 0 Oy - 0 Yüzde

Paylaşım Tarihi: 13.05.2016, 21:30:06 #1
ByClxon SEA !
Efsane Üye
Status: Çevrimdışı Yorum Sayısı:1,020 Konu Sayısı:444 Üyelik Tarihi:07.01.2016 Rep Puanı: 664

Bir nesnenin stilinde yapacağımız değişiklikleri animasyon şeklinde yapar.

Kullanım: .animate(özellikler, hız);

ÖRNEK 1

JavaScript Kodu



PHP Kod:
<div id="d1a" class="kutu">Aşağıdaki kutunun yüksekliğini 50 piksel yap!</div>
<
div id="d1b" class="kutu2"> </div>
<
script>
$(
"#d1a").click(function(){
$(
"#d1b").animate({height'50px'});
});
</script><br /><br /><br /> 

[b]Aşağıdaki kutunun yüksekliğini 50 piksel yap!




[b]ÖRNEK 2

Birden fazla değişikliği tek bir animate() ile yapabiliriz:

JavaScript Kodu
[/b]
[/b]



PHP Kod:
<div id="d2a" class="kutu">Aşağıdaki kutuyu ayrıca transparan yap!</div>
<
div id="d2b" class="kutu2"> </div>
<
script>
$(
"#d2a").click(function(){
$(
"#d2b").animate({
height'50px',
opacity'0.5'
});
});
</script><br /><br /><br /> 

[b][b][b]Aşağıdaki kutuyu ayrıca transparan yap!
[/b]
[/b]
[/b]








[b][b][b][b]ÖRNEK 3[/b]

[b]Elementin özelliği üzerinden işlem yapabiliriz.


JavaScript Kodu[/b][/b]
[/b]
[/b]



PHP Kod:
<div id="d3a" class="kutu">Aşağıdaki kutunun yüksekliğini 50 arttır</div>
<
div id="d3b" class="kutu2"> </div>
<
script>
$(
"#d3a").click(function(){
$(
"#d3b").animate({
height'+=50px'
});
});
</script><br /><br /><br /> 

[b][b][b][b][b]Aşağıdaki kutunun yüksekliğini 50 arttır
[/b]
[/b][/b]
[/b]
[/b]








[b][b][b][b][b][b]ÖRNEK 4[/b]

[b]Ayrıca hide, show ve toggle kullanılabilir (özellik olarak).


JavaScript Kodu[/b][/b]
[/b][/b]
[/b]
[/b]



PHP Kod:
<div id="d4a" class="kutu">Aşağıdaki kutuyu gizle/göster</div>
<
div id="d4b" class="kutu2"> </div>
<
script>
$(
"#d4a").click(function(){
$(
"#d4b").animate({
height'toggle'
});
});
</script><br /><br /><br /> 

[b][b][b][b][b][b][b]Aşağıdaki kutuyu gizle/göster
[/b]
[/b][/b]
[/b][/b]
[/b]
[/b]








[b][b][b][b][b][b][b][b]ÖRNEK 5[/b]

[b]Belli işlemleri sırasıyla yapıp animasyon oluşturmasını sağlayabiliriz.


JavaScript Kodu[/b][/b]
[/b][/b]
[/b][/b]
[/b]
[/b]



PHP Kod:
<div id="d5a" class="kutu">Aşağıdaki kutuyu oynat</div>
<
div id="d5b" class="kutu2"> </div>
<
script>
$(
"#d5a").click(function(){
var 
div=$("#d5b");
div.animate({height:'300px',opacity:'0.4'},"slow") ;
div.animate({width:'300px',opacity:'0.8'},"slow");




div.animate({height:'100px',opacity:'0.4'},"slow") ;
div.animate({width:'100px',opacity:'0.8'},"slow");
});
</script><br /><br /><br /> 

[b][b][b][b][b][b][b][b][b]Aşağıdaki kutuyu oynat
[/b]
[/b][/b]
[/b][/b]
[/b][/b]
[/b]
[/b]








[b][b][b][b][b][b][b][b][b][b]ÖRNEK 6[/b]

[b]Yazı tipi boyutu ile ilgili oynamalar için fontSize kullanılmalıdır.


JavaScript Kodu[/b][/b]
[/b][/b]
[/b][/b]
[/b][/b]
[/b]
[/b]



PHP Kod:
<div id="d6a" class="kutu">Aşağıdaki yazının boyutunu arttır</div>
<
div id="d6b" class="kutu2">Merhaba Dünya!</div>
<
script>
$(
"#d6a").click(function(){
var 
div=$("#d6b");
div.animate({fontSize:'3em'},"slow");
});
</script><br /><br /><br /> 

Kullanıcı İmzası
#fenerbahçeA.A.K.
İmage
İletişim İçin Facebook;

linkleri görmek için giriş yapmanız. Yada üye olmanız gerekir.


Öfkemiz sarsın her yanı, bozkurtlar yürüye yürüye
Dökülsün düşmanın kanı, yaşasın ırkçı TÜRKİYE!

Taşında gözü olanın yurduna MEZAR kazacağız
Hainin, soysuzun, döneğin alnına VATAN yaazcağız
Hainin, soysuzun alnına YAŞASIN TURAN yazacağız!



İmage






 

         

Paylaşım Tarihi: 13.05.2016, 21:35:27 #2
Dark Hack Cezalı Üye
Cezalı Üye
Status: Çevrimdışı Yorum Sayısı:218 Konu Sayısı:52 Üyelik Tarihi:08.05.2016

resim ekleseydinz !:







Aradığınızı Bulamadınız Mı ?

Konuyu görüntüleyenler:
1 Misafir