Jquery Fade (FadeIn,FadeOut,FadeTo,FadeToggle) Kullanımı

jQuery İle Elementlerin görünürlüklerini düzenleyebiliriz. Bunun için fade fonksiyonlarını kullanabiliriz.

jQuery Fade Fonksiyonları

Bir elementi sayfada gizlemek ya da göstermek isteyebiliriz. Mesela bir formumuz olduğunu düşünün ve bu formda T.C numarası adlı bir inputumuz olduğunu varsayalım. Kullanıcı Türk olmayabilir. Ülkeyi değiştirdiği an bu inputun görünmemesini isteyebiliriz. Bunun gibi durumlarda Fade fonksiyonarı işimizi rahatlıkla halletmemize olanak sağlar.

jQuery FadeIn Kullanımı

FadeIn fonksiyonu sayfada gizli olan elementi göstermek için kullanılır. Temel sözdizimi şu şekildedir.

$(seçici).fadeIn(hız,callback);

3 farklı şekilde kullanabiliriz. Parametre olarak slow,fast ya da milisaniye cinsinden sayı girebiliriz.

 <p class="p1" style="display:none">Ben artık görünürüm</p>
 <p class="p2" style="display:none">Ben artık görünürüm</p>
 <p class="p3" style="display:none">Ben artık görünürüm</p>
 <button>Tıkla</button>
<script type="text/javascript">
	$(document).ready(function(){
		 $('button').click(function(){
		 	 $('.p1').fadeIn();
		 	 $('.p2').fadeIn('slow');
		 	 $('.p3').fadeIn(5000);
		 })
	})
</script>

Butona tıkladığımızda şunlar olur:

p1 sınıfına sahip element ilk olarak hızlı bir şekilde açılır.

p2 sınıfına sahip element ikinci olarak yavaş bir şekilde açılır. Bunun sebebi p2 sınıfının fadeIn metoduna slow parametresi göndermemizden kaynaklıdır.

p3 sınıfına sahip elementi istediğimiz sürede ayarlayabiliriz. Ben 5 saniyede açılmasını istediğim için 5000 parametresini gönderdim.

jQuery FadeOut Kullanımı

FadeOut metodu ise görünen bir elementi gizlemek için kullanılır. fadeIn metoduyla aynı şekilde kullanılır ve Aynı parametreleri alır.

Bir örnekle açıklayalım.

 <p class="p1">Butona tıkla beni gizle</p>
 <p class="p2">Butona tıkla beni gizle</p>
 <p class="p3">Butona tıkla beni gizle</p>
 <button>Tıkla</button>
<script type="text/javascript">
	$(document).ready(function(){
		 $('button').click(function(){
		 	 $('.p1').fadeOut();
		 	 $('.p2').fadeOut('slow');
		 	 $('.p3').fadeOut(5000);
		 })
	})
</script>

jQuery FadeToggle Kullanımı

FadeToggle metodu ise fadeIn ve fadeOut metotlarının birleşmiş halidir. Eğer element gizli ise görünür, görünütr ise gizli yapar. Parametre olarak slow , fast ya da milisaniye cinsinden sayı alır.

 <p class="p1">Butona tıkla sihiri gör</p>
 <p class="p2">Butona tıkla sihiri gör</p>
 <p class="p3">Butona tıkla sihiri gör</p>
 <button>Tıkla</button>
<script type="text/javascript">
	$(document).ready(function(){
		 $('button').click(function(){
		 	 $('.p1').fadeToggle();
		 	 $('.p2').fadeToggle('slow');
		 	 $('.p3').fadeToggle(2000);
		 })
	})
</script>

jQuery FadeTo Kullanımı

FadeTo metodu ise nesnenin tamamen kaybolmasına izin vermez. Belli bir opaklığa kadar soldurulmasına olanak sağlar. 2 parametre alır ilk parametresi solma hızı ikinci parametre ise opacity değeridir. 0 ile bir arasında ondalıklı bir sayı girmemiz bekler.

 <p class="p1">Butona tıkla sihiri gör</p>
 <button>Tıkla</button>
<script type="text/javascript">
	$(document).ready(function(){
		 $('button').click(function(){
		 	 $('.p1').fadeTo('slow',0.2);
		 })
	})
</script>

YAZAR HAKKINDA

26 Yaşında. Araştırmayı seven, bir şeyler öğretmeye meraklı bir Bilgisayar Mühendisi