JQuery ile nesnelerin aşağı doğru genişleyerek açılmasını ya da yukarı doğru kapanarak gizlenmesini sağlayabiliriz.

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

$(selector).slideMetodu( 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.

Slide metotlarını inceleyelim:

slideDown()

Metodu Gizlenmiş durumdaki bir nesnenin aşağı doğru genişleyerek açılmasını sağlar.

Örnek: Aşağıdaki örnekte slideDown metodu 3 farklı şekilde kullanılmıştır.

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

slideUp() Metodu

Nesnelerin yukarı doğru kapanarak gizlenmesini sağlar.

Örnek:

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

slideToggle() Metodu

Bağlandığı nesne görünür ise kapanmasını, gizli ise açılmasını sağlar.

Örnek:

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