jQuery Dersleri
jQuery Nedir?
jQuery Nedir?
jQuery Kurulumu
jQuery Kod Yapısı
jQuery ready Fonksiyonu
jQuery Nesne Seçimi
jQuery Fonksiyonlar

jQuery Efektleri
jQuery Gizle ve Göster
jQuery Kaydırma
jQuery Animasyonlar
jQuery callback
jQuery Toplu İşlemler

jQuery HTML
jQuery Bilgi Almak
jQuery Bilgi Değiştirme
jQuery Bilgi Ekleme
jQuery Veri Silme
jQuery'de CSS İşlemleri

jQuery Nesneler
jQuery Nesne Boyutları
jQuery Nesne Bulma/Seçme

jQuery AJAX
jQuery AJAX

Bağlantılar
HTML Dersleri
JavaScript Dersleri
CSS Dersleri
ASP Dersleri
PHP Dersleri
MySQL Komutları
jQuery Dersleri
Venus Programlama

Ana Sayfa Bize Ulaşın

jQuery Animasyonlar



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

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

ÖRNEK 1

JavaScript Kodu
<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 />

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
<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 />

Aşağıdaki kutuyu ayrıca transparan yap!
 



ÖRNEK 3

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

JavaScript Kodu
<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 />

Aşağıdaki kutunun yüksekliğini 50 arttır
 



ÖRNEK 4

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

JavaScript Kodu
<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 />

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



ÖRNEK 5

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

JavaScript Kodu
<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 />

Aşağıdaki kutuyu oynat
 



ÖRNEK 6

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

JavaScript Kodu
<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 />

Aşağıdaki yazının boyutunu arttır
Merhaba Dünya!



Tüm hakları saklıdır. Lütfen kaynak belirtmeden sitenizde yayınlamayın. Web Sitesi © 2014