JQuery Fade Metotları

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);

});