JQuery Animasyonlar


Webmaster Genel   

Yazar: ByClxon    1 Yorum    161 Görüntüleme
  • Derecelendirme: 0/5 - 0 oy

Paylaşım Tarihi: 13.05.2016, 21:30:06 #1
ByClxon SEA !
Efsane Üye
Status: Çevrimdışı Yorumları:1,010 Konuları:442 Kayıt Tarihi:07.01.2016 Rep Puanı: 667

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

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

ÖRNEK 1

JavaScript Kodu



PHP Kod:
1
2
3
4
5
6
7
<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:
1
2
3
4
5
6
7
8
9
10
<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:
1
2
3
4
5
6
7
8
9
<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:
1
2
3
4
5
6
7
8
9
<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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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:
1
2
3
4
5
6
7
8
<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.
Resim http://i.hizliresim.com/nErB8V.png
İletişim İçin Facebook;

Sitemize kayıtlı değilseniz linkleri görebilmeniz İçin Kayıt Olun veya Giriş Yapın


Ö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!



Resim http://i.hizliresim.com/LQgldG.png






 

         


Paylaşım Tarihi: 13.05.2016, 21:35:27 #2
Dark Hack Cezalı Üye
Cezalı Üye
Status: Çevrimdışı Yorumları:214 Konuları:52 Kayıt Tarihi:08.05.2016

resim ekleseydinz !:










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

Konuyu Okuyanlar:
1 Ziyaretçi