jQuery fadeIn() , fadeOut() , fadeToggle() ve fadeTo()

Dostlar bu dersimizde ise jQuery fadein() , faedout() , fadetoggle() ve fadeto() efektlerini inceleyeceğiz. Bu efektler yapılacak işlemi yavaş bir şekilde gerçekleştirir. Hide ve Show metodları ile arasında ki farkları anlamak için aşağıdaki örneklerimizi inceleyelim.

Kullanımı yine aynıdır ve iki parametre alır.

$(selector).fadeIn(speed,callback);

Yine aynı şekilde parametre alma zorunluluğu yoktur ama istersek verip Html elementlerimizi daha efektif hale getirebiliriz.

jQuery fadeIn()

Bu metodumuzun seçilen Html elementi üzerinde işlem yaparken soluk şekilde efekt verdiğini söylemiştik. Parametre olarak Sn , Slow yada Fast şeklinde de parametre alabilir. Aşağıdaki örneğimize bakalım.

Örneği incelediğimiz de ne gibi efekt yaptığı daha kolay anlaşılmakta. Şimdi diğer bir metodumuz olan fadeout() a gidelim.

jQuery fadeOut()

jQuery fadeout() metodumuz ise fadein() metodunun tam tersine var olan Html elementlerimiz yavaş bir şekilde gizlenmesini sağlar. Yine aynı şekilde parametre alabilirler. Aldıkları parametreler Saniye , Slow yada Fast şeklinde olabilir. Örneğimizi inceleyelim.

Canlı örnek kodlarımızı inceledi isek ne işe yaradığı rahat bir şekilde anlayabiliriz.

jQuery fadeToggle()

FadeToggle() metodumuz ise tek bir işlem ile Html elementimizi gizli ise göstermeye , gösteriliyor ise gizlemeye yarayan bir metodumuz dur. Gizleme ve gösterme işlevini tek başına yapar. Aşağıdaki örneğimizi inceleyerek daha iyi anlayalım.

İlk olarak Html div elementlerimiz gösteriliyor. fadeToggle() metodu ile butona bastığımızda gizledik. Gizledikten sonra tekrar aynı butona bastığımızda gizlemen div elementleri tekrar gösterilmeye başlanacaktır.

jQuery fadeTo()

Bu dersimizin son metodu ise fadeto() efekti. Bu metod 0 ile 1 arasında bir opacity değeri alır. Yazım şekli ise aşağıdaki gibidir.

$(selector).fadeTo(speed,opacity,callback);

Şimdi canlı örneğimizi inceleyerek daha iyi anlayalım.

Yukarıda ki diğer örneklerden farklı olarak bu metodumuz ile opacity değeri verdik. Böylece Html elementlerimiz saydamlık özelliği kazandı.

Ben bu zamana kadar bu metodu hiç kullanmadım ama eğer işlerinize yarayacak bir şey ise kullanabilirsiniz. Diğer bir derste görüşmek üzere.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Shares