Sep.06

Hızlandırılmış jQuery 3 Dersleri : Animate (Animasyon)

Daha önceki konularımızda jQuery’de .css() metodunu kullanarak elementlere yeni stiller atamayı veya var olanı değiştirmeyi görmüştük. .animate() metodu da .css() metoduna benzer, ancak yeni atanan stilleri geçiş efekti olarak uygular. Mesela bir img etiketinin genişliği 100px iken, .animate() metodu ile 200px olarak değiştirilirse, direkt 200 olmak yerine 100’den 200’e artan bir değerle genişleyerek ilerleyecektir.

.animate() metodunun 2 adet parametresi vardır. Birincisi, yeni atanacak olan CSS yapısıdır. Bu yapı Object olmak zorundadır, yani {} işaretleri arasında yazılır. İkinci parametre de hızı belirler. Ya string olarak “fast”, “slow” veya milisaniye cinsinden animasyonun süresi. Zorunlu bir parametre değildir.

Yukarıdaki örneğimiz ile devam edelim. Butonların isimlerini ve fonksiyonlarını değiştireceğiz.

<div id="goruntu">
<img src="dempsey-roll.jpeg" />
<p>Dempsey Roll</p>
</div>
<div>
  <button id="genislet">Genişlet</button>
  <button id="daralt">Daralt</button>
  <button id="cokluDegisiklikYap">Çoklu Değişiklik Yap</button>
</div>

CSS’imizi yine aynı şekilde bırakalım…

jQuery kodumuz da aşağıdaki gibi olsun.

$("#genislet").click(function(){
    $("#goruntu").animate({width: '600px'},"slow");
});
$("#daralt").click(function(){
		$("#goruntu").animate({width: '200px'},"fast");
});
$("#cokluDegisiklikYap").click(function(){
		$("#goruntu").animate({
                     			width: '300px',
                    			height: '200px',
                    			opacity: 0.5
                   		}, 3000);
});

Birinci buton ile goruntu id’li div’i 600px ölçüsüne yavaşça genişletiyoruz. İkinci buton ile 200px ölçüsüne hızlıca daraltıyoruz. Üçüncü butonda ise 300px genişlik, 200px yükseklik ve 0.5 opacity ile yarı şeffaf bir hale 3 saniyede getiriyoruz.

İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum