jquery efekt yapımı ve örnekler

Merhabalar, 

Bu yazımda  jqueryde efektlere bakıp ve basit bir örn
ek yapıyor olacağız.

1) Gösterme / Gizleme efektleri

hide : görünür olan bir elementi gizler.( elementin css deki display propertysini none yapar )
show : gizli olan bir elementi gösterir. ( elementin css deki display propertysini block yapar )
toggle : gizli olan elementi gösterir görünür olan elementi gizler

kullanımı : 
$(secilenelement).hide(); // gizle
$(secilenelement).show(); // goster
$(secilenelement).toggle() // gizle ya da göster

hide ve show fonsiyonları ayrıca paremetre olarak milisaniye cinsinden ya da slow,normal ve fast gibi string 
değerde alırlar böylece gizleme/gösterme işlemini
zamana bağlı bir efekt şeklinde yaparlar.

kullanımı : 
$(secilenelement).hide(1000); // 1 saniyede  gürünmez yap .
$(secilenelement).show("slow"); // 600 milisaniyede görünür yap.
$(secilenelement).toggle("slow"); // 600 milisaniyede görünür ya da görünmez yap.

slow -> 600 milisaniye.
normal -> 400 milisaniye.
fast -> 200 milisaniye.
2)  Slayt efekti

.slideDown() //  bu efekt görünmez olan bir elementi yüksekliğini yavaş yavaş artırarak görünür yapar.
.slideUp() //  bu efekt görünmez olan bir elementi yüksekliğini yavaş yavaş azaltarak görünmez yapar.

Kullanımı :
 $(secilenelement).slideUp(1000);
 $(secilenelement).slideDown("slow");
 $(secilenelement).slideToggle(1000);

3) Şeffaflık efekti

.fadeIn() // bir elementin şeffaflığını yavaş yavaş artırarak görünür yapar.
.fadeOut() // bir elementin şeffaflığını yavaş yavaş azaltarak görünmez yapar.
.fadeTo() // bir elementin şeffaflığını yavaş yavaş istenilen değere getirir yani 0-1 rasındaki bir değere.

Kullanımı :
 $(secilenelement).fadeOut(1000);
 $(secilenelement).fadeIn("slow");
 $(secilenelement).fadeTo(1000,0.5);// elementi 1 saniye süre içerinde 0.5 opaclık değerine ulaştırır.

tüm efektler ile ilgili demoları aşağıda görebilirsiniz.
 

 Kolay gelsin.