JQuery ile nesneleri solarak yavaşça yok edebilir veya gizlenmiş bir nesnenin saydamlığını yavaşça artırarak görünür olmasını sağlayabiliriz.

Fade metodunun 4 farklı varyasyonu olup, kullanım şekli hem birbirleriyle hem de diğer konularda işlediğimiz metotlar ile aynıdır:

$(selector).fadeMetodu( hız, callbackFonksiyonu );

Parametreler isteğe bağlıdır. Efekt hızını belirlemek için slow, fast veya milisaniye cinsinden süre verilebilir. Callback fonksiyonları ise önceki konumuzda anlatılmıştır.

Fade metotlarını inceleyelim:

fadeIn() Metodu Gizlenmiş durumdaki nesnelerin saydamlığını artırarak görünür olmasını sağlar. Örnek: Aşağıdaki örnekte fadeIn metodu 3 farklı şekilde kullanılmıştır.

$("#button1").click(function(){
    $("#kutu1").fadeIn();
    $("#kutu2").fadeIn("slow");
    $("#kutu3").fadeIn(3000);
});

fadeOut() Metodu Nesnelerin solarak gizlenmesini sağlar.

Örnek:

$("#button1").click(function(){
    $("#kutu1").fadeOut();
    $("#kutu2").fadeOut("slow");
    $("#kutu3").fadeOut(3000);
});

fadeToggle() Metodu Bağlandığı nesne görünür ise solmasını, gizli ise görünmesini sağlar.

Örnek:

$("#button1").click(function(){
    $("#kutu1").fadeToggle();
    $("#kutu2").fadeToggle("slow");
    $("#kutu3").fadeToggle(3000);
});

fadeTo() Metodu Nesneleri istenen saydamlığa kadar soldurmayı sağlar. Saydamlık derecesi olarak 0 ile 1 arasında bir değer verilir.

Örnek:

$("#button1").click(function(){
    $("#kutu1").fadeTo(“fast”, 0.3);
    $("#kutu2").fadeTo("slow",0.6);
    $("#kutu3").fadeTo(3000, 0.5);
});