• Üyelik paylaşımı yasaktır! Hesabınızı başkalarına vermeyin! Hesap paylaşımları yasaklama ile sonuçlanacaktır.

JQuery Animasyonlar

Durum
Üzgünüz bu konu cevaplar için kapatılmıştır...

ByClxon

Süper Üye
Katılım
7 Ocak 2016
Mesajlar
955
Beğeni Puanı
4
Yaş
22
[font='Titillium Web', sans-serif]Bir nesnenin stilinde yapacağımız değişiklikleri animasyon şeklinde yapar.[/FONT]

[font='Titillium Web', sans-serif]Kullanım: .animate(özellikler, hız);[/FONT]

[font='Titillium Web', sans-serif]ÖRNEK 1

JavaScript Kodu
[/FONT]



PHP:
<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 />
[font='Titillium Web', sans-serif][font='Titillium Web', sans-serif]Aşağıdaki kutunun yüksekliğini 50 piksel yap!




ÖRNEK 2

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

JavaScript Kodu
[/FONT]
[/FONT]



PHP:
<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 />
[font='Titillium Web', sans-serif][font='Titillium Web', sans-serif]Aşağıdaki kutuyu ayrıca transparan yap!
[/FONT]
[/FONT]








[font='Titillium Web', sans-serif][font='Titillium Web', sans-serif]ÖRNEK 3

Elementin özelliği üzerinden işlem yapabiliriz.

JavaScript Kodu
[/FONT]
[/FONT]



PHP:
<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 />
[font='Titillium Web', sans-serif][font='Titillium Web', sans-serif]Aşağıdaki kutunun yüksekliğini 50 arttır
[/FONT]
[/FONT]








[font='Titillium Web', sans-serif][font='Titillium Web', sans-serif]ÖRNEK 4

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

JavaScript Kodu
[/FONT]
[/FONT]



PHP:
<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 />
[font='Titillium Web', sans-serif][font='Titillium Web', sans-serif]Aşağıdaki kutuyu gizle/göster
[/FONT]
[/FONT]








[font='Titillium Web', sans-serif][font='Titillium Web', sans-serif]ÖRNEK 5

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

JavaScript Kodu
[/FONT]
[/FONT]



PHP:
<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 />
[font='Titillium Web', sans-serif][font='Titillium Web', sans-serif]Aşağıdaki kutuyu oynat
[/FONT]
[/FONT]








[font='Titillium Web', sans-serif][font='Titillium Web', sans-serif]ÖRNEK 6

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

JavaScript Kodu
[/FONT]
[/FONT]



PHP:
<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 />
 
Durum
Üzgünüz bu konu cevaplar için kapatılmıştır...


Üst Alt