JQuery ile Gizleme ve Gösterme

JQuery ile Nesneleri Gizleme ve Gösterme

JQuery kullanarak nesneleri gizlemek, gizli olan nesneleri göstermek gibi işlemler çok kolay yapılabilir. Bunun için kullanılabilecek metotlardan üçü bu sayfada açıklanmış olup, ileriki konularda farklı metotlar da anlatılmıştır.

Nesneleri gizlemek için kullanılan en temel metot hide metodudur. Gizli durumdaki nesneleri göstermek içinse show metodu kullanılır. Toggle metodu ise bu iki metodun birleşimi gibi olup, nesne gizliyse gösterir, değilse gizler. Bu metotları sırayla inceleyelim.

hide() Metodu ile Nesneleri Gizleme

Nesneleri gizleyen hide metodu parametresiz kullanılabileceği gibi isteğe bağlı olarak efekt süresi ve callback fonksiyonu da belirtilebilir.

$("#button1").click(function(){
    $("#kutu1").hide();
});

Yukarıdaki örnekte button1 nesnesine tıklandığında kutu1'in gizlenmesi sağlanmıştır. Hiç parametre kullanılmadığı için gizlenme yavaşça değil, tıklandığı anda olacaktır.

Aşağıdaki örnekte ise gizlenme işleminin 1000 ms, yani 1 sn içerisinde gerçekleşmesi sağlanmıştır. Bu yöntem ile nesnelerin yavaşça gizlenmesini sağlayabiliriz.

$("#button1").click(function(){
    $("#kutu1").hide(1000);
});

Efektin süresi milisaniye cinsinden belirtilebileceği gibi slow ya da fast değerleri de kullanılabilir.

Callback metodu kullanımı bir sonraki konuda anlatılacaktır.

$("#button1").click(function(){
    $("#kutu1").hide("slow");
});

show() Metodu ile Gizli Durumdaki Nesneleri Görünür Yapma

Show metodunun kullanımı hide metodu ile aynı olup, yaptığı iş gizlenmiş nesneyi göstermektir.

$("#button1").click(function(){
    $("#kutu1").show();
});

Yukarıdaki örnekte button1 nesnesine tıklandığında kutu1'in görünür yapılması sağlanmıştır. Hiç parametre kullanılmadığı için görünme yavaşça değil, tıklandığı anda olacaktır.

Aşağıdaki örnekte ise nesnenin yavaşça görünmesi sağlanmıştır.

$("#button1").click(function(){
    $("#kutu1").show(1000);
});

toggle() Metodu Kullanımı

Toggle metodu, hide ve show metotlarının ikisinin de aynı tetikleyici tarafından gerçekleştirilebilmesini sağlar.

Örneğin bir butona tıklandığında nesne gizliyse göstersin, görünürse gizlensin istiyorsak, toggle metodu en iyi çözümdür.

Kullanımı hide ve show metodu ile aynıdır.

$("#button1").click(function(){
    $("#kutu1").toggle();
});

Yukarıdaki örnekte parametre kullanılmadığı için görünme veya gizlenme yavaşça değil, tıklandığı anda olacaktır.

Aşağıdaki örnekte ise nesnenin yavaşça görünmesi ve gizlenmesi sağlanmıştır.

$("#button1").click(function(){
    $("#kutu1").toggle(1000);
});