JQUERY Çoklu Animasyon (Animate)

Jquery ile nesnelere hareket ve renk değişimi gibi animasyonlar eklenebilir, ayrıca bu eklenen animasyonların sayıları da birden fazla olabilir.

Nesnelere animasyon eklemek için animate fonksiyonu kullanılır.

Fonksiyonun söz dizimi şu şekildedir. animate({animasyonlar,süre,eklenecek fonksiyon}), eklenecek fonksiyon, animasyon oluştuktan sonra çalışması istenen herhangi bir fonksiyon var ise eklenir, örneğin alert('animasyon bitti'); şeklinde.

Önemli Not: Pozisyon ile ilgili animasyonlar için animasyon uygulanacak nesnenin position özelliği absolute veya relative olmalıdır. Varsayılan static olduğu için bu uygulamada çalışmaz.

Önemli Not- 2:Renk değişimi özelliği Jquery de içerisinde bulunmamaktadır, renk değişimi için ayrıca kütüphaneler eklenmelidir.

Aşağıdaki örnekte biri tek, diğeri birden fazla animasyon içeren 2 adet animate örneği vardır. Çok animasyonda, özellikler arasına virgül konmaldır.

İlk örnekte butonun tıklanma olayı seçilmiş ve sonrasında $('#kutu1').animate({ left: '250px',}, 1000); kutu1 nesnesi seçilerek soldan 250px olacak şekilde konum değişikliği animasyonu eklenmiştir. Ayrıca ms cinsinden animasyon hızı da belirtilmiştir.

Diğer örnekte ise, tıklanma olayı seçildikten sonra

             $('#kutu2').animate({
					top: '50px',
					width:'400px',
					opacity:'.2'
					}, 2000, 
						function(){
							alert('animasyon bitti');
						}
					);
				});
kodları ile üst: 50px, genişlik:400px ve saydamlık : .2 olacak şekilde çoklu animasyon verilmiştir, devamında ise süre belirtilmiş en son olarak da animasyon bitti uyarısı için bir fonksiyon oluşturulmuştur.


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın