Jquery Slide Metotları

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

});