jQuery Animasyonlar - jQuery Dersleri

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!