Hide, Show, Toggle, Slide, Fade, ve Animate ... JQuery' nin en çok bilinen fonksiyonlarıdır. İlk olarak aslında her yerde bahsedilen başlıca efektlerden bahsedelim. Bu efektler jQuery'i jQuery yapan efektler.

Bu efektleri açıklamak gerekirse;

jQuery hide()
Seçilen elemanı gizlemeye yarar.

jQuery slideToggle()
Slayt panel oluşturulur.

jQuery fadeTo()
Seçilen öğreyi karartarak kaybeder.

jQuery animate()
Seçilen öğeye animasyon oluşturur.

jQuery Hide ve Show

jQuery hide ve show metodlarıyla belirlenen seçicileri gizleyip göstermeye yarar.Örnek;

$("#gizle").click(function(){
 $("p").hide();
 });
 $("#goster").click(function(){
 $("p").show();
 });

hide() ve show() metodlarıyla istediğimiz öğeyi gizleyip gösterebilirken bu gizleme ve gösterme esnasında efektin oluşma hızını (süresi) kendiniz belirleyebilirsiniz.Bu belirleme işlemi ingilizce sıfatlardan oluşabileceği gibi milisaniye olarakta bir değer atanabilir. Aşağıdaki 1000 milisaniye olarak gösterdiğim bölüme; slow, fast, normal gibi değerler de girilebilir.

$("efekt").click(function(){
 $("p").hide(1000);
 });

jQuery Toggle

jQuery toggle fonksiyonu hide() ve show() metodlarının bir arada kullanılmış halidir. Yani toggle metodunu kullanarak tek bir fonksiyon ile hem açma hem de kapama işlemi gerçekleştirilebilir.

$("efekt").click(function(){
 $("p").toggle();
 });

jQuery Slide Fonksiyonu – slideDown, slideUp, slideToggle

jQuery slide fonksiyonu aşağıdaki gibi kullanılır;

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

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

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

Hız parametresine; fast, slow, normal ya da milisaniye değeri girilebilir.

Callback parametresi ise , bu fonksiyonun bitmeden başka bir fonksiyon oluşturmak istenildiğinde, içeriye yeni bir fonksiyon atayabileceğiniz parametredir.

slideDown() Örneği;

$(".slide").click(function(){
 $(".panel").slideDown();
 });

slideUp Örneği;

$(".slide").click(function(){
 $(".panel").slideUp()
 })

slideToggle Örneği;

$(".slide").click(function(){
 $(".panel").slideToggle();
 });

jQuery Fade Fonksiyonları – fadeIn(), fadeOut(), fadeTo()

jQuery fade() fonksiyonları aşağıdaki gibi kullanılabilir,

$(selector).fadeIn(hız,callback)

$(selector).fadeOut(hız,callback)

$(selector).fadeTo(hız,şeffaflık,callback)

Hız parametresi fast, slow, normal ve milisaniye değeri içerir.

Callback parametresi fonksiyon bitmeden yeni bir fonksiyon atama işlemidir.

Şeffaflık değeri ise; yalnız fadeTo fonksiyonunda kullanılabilen gizlenme işleminin şeffaflık ayarını yapmayı sağlar.

fadeTo Örneği;

$("efekt").click(function(){
 $("div").fadeTo("slow",0.25);
 });

fadeOut Örneği;

$("efekt").click(function(){
 $("div").fadeOut(4000);
 });

JQuery Metodları

Belli başlı jQuery fonksiyonlarını özetlemek gerekirse;