Sep.06

Hızlandırılmış jQuery 3 Dersleri : Effects (Efektler)

jQuery ile bir takım basit efektleri kolaylıkla hazırlayabiliyoruz. Mesela bir elementin görünmez veya görünür yapılması, bunları yaparken solma efektlerinin uygulanması veya çeşitli kayma efektleri basitçe oluşturulabilir. Ayrıca CSS değişikliği yaparken bile bunun animasyonlu bir şekilde yapabilirsiniz. Şimdi bunları uygulamalarla görelim…

Elementi Göstermek ve Gizlemek ( .show(), .hide() )

Bir elementi gizlemek için .hide(), tekrar göstermek için de .show() metodundan faydalanabiliriz. Örneğimizde img etiketi ile bir resim yükleyelim. Yanında da bir button ile hem gizleyip hem gösterelim.

<button>Gizle / Göster</button>
<br>
<img src="picture.png" />

jQuery kodumuzda yapacağımız işlem şöyle olacak. Butona tıklandığında bir if koşuluna gireceğiz. .css() metodu ile elementin display özelliğinin none olup olmadığını kontrol edeceğiz. Eğer none ise gizlenmiş demektir, bu sebeple .show() metodunu kullanıp görünür yapacağız. Eğer if koşulu true olarak dönmezse, o zaman element zaten görünür haldedir. Bu nedenle elementi .hide() metodu ile gizleyeceğiz. Gizleme işlemi yapılırken aslında elementin CSS’ine display:none stili arkaplanda eklenir.

$("button").click(function(){
	if( $("img").css("display") == "none" ){
		$("img").show();
	}else{
		$("img").hide();
	}
});

Solma Efektleri ( .fadeIn(), fadeOut(), fadeToggle(), fadeTo() )

Yukarıdaki örneğimizden devam edelim…

Gizleme ve gösterme efektlerini uygularken resim bir anda görünür veya görünmez oluyordu. Ancak istersek bu geçişi daha yumuşak bir hale getirebiliriz. Yumuşak bir şekilde solmasını sağlamak için fadeOut(), yumuşak bir şekilde görünür olmasını sağlamak için fadeIn() metotları kullanılır. Bu metotlar birer parametre alır. Parametre olarak ya milisaniye cinsinden bu efektin süreceği zamanı, ya da string olarak “slow” veya “fast” olacak şekilde hızını belirleyebiliriz.

jQuery kodumuzu aşağıdaki gibi güncelleyip sonucu test edin.

$("button").click(function(){
	if( $("img").css("display") == "none" ){
  	  	$("img").fadeIn("slow");
  	}else{
  	  	$("img").fadeOut(1000);
  	}
})

Görünür olurken “slow” parametresi ile yavaş olmasını, gizlenirken de 1000 milisaniye hızla görünmez olmasını sağladık.

Aslında buraya kadar yazmış olduğumuz kodları çok daha basit bir şekilde de yapabiliriz. fadeToggle() metodu, eğer seçilen nesne gizliyse görünür yapar, görünürse gizli yapar. Yapılan bu işlemleri de fade efekti ile yumuşak bir şekilde yapar.

$("button").click(function(){
	$("img").fadeToggle();
});

Ek olarak bir de fadeTo() metodu vardır, 3 adet parametre alır. Birincisi, hızı (“slow”, “fast” veya milisaniye cinsinden süre), ikincisi nesnenin opacity (şeffaflık) değeridir. 0-1 arası değer alır. 0 tam görünmez, 1 de tam görünür değeridir. Üçüncü parametre de sürenin bitiminden sonra çağrılacak olan fonksiyonun adıdır.

$("button").click(function(){
  	$("img").fadeTo("slow", 0, bitti);
});
function bitti(){
  	alert("efekt bitti!")
}

Yazdığımız bu kod ile “slow” süresince (yaklaşık 1 saniyeye denk geliyor) nesne 0 opacity, yani tam görünmez olacak. Süre bitince de bitti isimli fonksiyon çağırılacak. O fonksiyon da bir alert() mesajı verecek.

<strong>Kayma ( .slide() )</strong> 

jQuery ile herhangi bir HTML5 elementini yukarıya veya aşağıya doğru kaydırabiliriz. Yalnız bu kayma efekti, ilk akla gelen aşağı veya yukarı doğru ilerleme anlamında değildir. Bu efekt, aynı bir perdenin açılıp kapanması gibidir. Yukarıya doğru yapılan kaydırma efekti ile nesne aşağıdan yukarıya doğru maskelenerek kapatılır. Aşağıya doğru yapılan kaydırma ile de nesne yukarıdan aşağıya doğru açılarak gelir.

Örneğimizde 2 adet div oluşturalım. Birinci div içinde bir resim ve basit bir paragraf olsun. İkinci div’de de 3 adet button olsun. Bunlardan biri aşağı, diğeri yukarı ve üçüncüsü de hem aşağı hem yukarı (toggle) kaydırma efektlerini yapan bir buton olsun.

Öncelikle HTML5 öğelerini oluşturalım.

<div id="goruntu">
<img src="dempsey-roll.jpeg" />
<p>Dempsey Roll</p>
</div>
<div>
  <button id="asagiKaydir">Aşağı Kaydır</button>
  <button id="yukariKaydir">Yukarı Kaydır</button>
  <button id="asagiYukariKaydir">Aşağı / Yukarı Kaydır</button>
</div>

Bir de CSS ile stil verelim.

div{
  float: inline-block;
  border: 1px solid black;
  padding: 10px;
  margin: 5px;
  width: 400px;
}
img{
  width: 100%;
  height: auto;
}

Stilimiz oldukça basit. Sadece div’leri ve resimleri ölçülendirip kenar ve iç kenar boşluklarını ayarlayıp, div’leri de alt alta sıralıyoruz. Alt alta sıralamamızda bir amaç var; resmin olduğu üstteki div kaydığında, altta kalan butonların olduğu div’in de kayma ile oluşan boşluğu doldurduğunu görmek içindir.

jQuery kodumuz da aşağıdaki gibi olacaktır.

$("#asagiKaydir").click(function(){
   	$("#goruntu").slideDown();
});
$("#yukariKaydir").click(function(){
   	$("#goruntu").slideUp();
});
$("#asagiYukariKaydir").click(function(){
   	$("#goruntu").slideToggle();
});

.slideDown() metodu ile aşağıya, .slideUp() metodu ile yukarıya ve .slideToggle() metodu ile de çift yönlü olarak kaydırma yapabiliyoruz.

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

Leave a comment

Yorum