jQuery hide(), show() ve toggle() Fonksiyonları Kullanımı

Bu makalede jQuery'nin hide(), show() ve toggle() fonksiyonlarını öğreneceğiz. Bu fonksiyonlar sayesinde elementleri (açılır kapanır div, p vb.) gizleyebilir ya da gösterebiliriz. 3 fonksiyonda içeriği sağ alt köşeden sol üst köşeye doğru gizler veya sol üst köşeden sağ alt köşeye doğru gösterir. Örneklere başlamadan önce uyarımı yapmak istiyorum; jQuery kütüphanesini mutlaka sayfanıza ekleyin çünkü jQuery kütüphanesini eklemeden jQuery ile yapacağınız hiçbir kod çalışmayacaktır. 

1) hide()

Sayfanızdaki elementleri gizlemek için hide() metodunu kullanmanız gerekir. Örneğin div içerisindeki uyarı yazısı bir butona tıklanınca kaybolsun istiyorsanız bu metodu kullanırsınız. Hide kelimesinin Türkçe karşılığı gizle, sakla demektir.

Syntax:

$(selector).hide(speed,callback);

Örnek Kod:

    $(document).ready(function(){
        $(".buton").click(function(){
            $(".pencere").hide();
        });
    });

Yukarıdaki kodun işlevi çok basit; class'ı buton olan (class="buton") bir elemente tıklayınca class'ı pencere olan (class="pencere") elementi gizle demek. hide() metodunun 2 parametresi vardır. Syntaxda görüldüğü üzere; birincisi hız, ikincisi ise işlem bitince ne yapılacak (örnek; uyarı mesajı versin). Şimdilik hız parametresini inceleyelim.

hide() => İçerik butona bastığınız anda kaybolur. Hızı ayarlamak için ya ingilizce olarak slow veya fast kullanacaksınız ya da milisaniye cinsinden zamanı kendiniz gireceksiniz.

hide("slow") - hide("fast") => İçerik sırasıyla yavaş (600ms) ve hızlı (200ms) şekilde kaybolur.

hide(5000) => İçerik 5 saniye içerisinde kaybolur. (5000 milisaniye = 5 saniye)

2) show()

Sayfanızdaki gizli elementleri göstermek için show() metodunu kullanmanız gerekir. Show kelimesinin Türkçe karşılığı göster demektir.

Syntax:

$(selector).show(speed,callback);

Örnek Kod:

    $(document).ready(function(){
        $(".buton").click(function(){
            $(".pencere").show();
        });
    });

Yukarıdaki kodun işlevi çok basit; class'ı buton olan (class="buton") bir elemente tıklayınca class'ı pencere olan (class="pencere") elementi göster demek. show() metodunun 2 parametresi vardır. Syntaxda görüldüğü üzere; birincisi hız, ikincisi ise işlem bitince ne yapılacak (örnek; uyarı mesajı versin). Şimdilik hız parametresini inceleyelim.

show() => İçerik butona bastığınız anda gösterilir. Hızı ayarlamak için ya ingilizce olarak slow veya fast kullanacaksınız ya da milisaniye cinsinden zamanı kendiniz gireceksiniz.

show("slow") - show("fast") => İçerik sırasıyla yavaş (600ms) ve hızlı (200ms) şekilde gösterilir.

show(5000) => İçerik 5 saniye içerisinde gösterilir. (5000 milisaniye = 5 saniye)

3) toggle()

toggle() fonksiyonu show() ve hide() fonksiyonunun birleşimidir. İçeriğinizi, tıklandığında gizlemek ve tekrar tıklandığında göstermek için bu fonksiyonu kullanırız.

Syntax:

$(selector).toggle(speed,callback);

Örnek Kod:

    $(document).ready(function(){
        $(".buton").click(function(){
            $(".pencere").toggle();
        });
    });

Yukarıdaki kodun işlevi çok basit; class'ı buton olan (class="buton") bir elemente tıklayınca class'ı pencere olan (class="pencere") elementi göster, tekrar tıklayınca gizle demek. toggle() metodunun 2 parametresi vardır. Syntaxda görüldüğü üzere; birincisi hız, ikincisi ise işlem bitince ne yapılacak (örnek; uyarı mesajı versin). Şimdilik hız parametresini inceleyelim.

toggle() => İçerik butona bastığınız anda gösterilir veya gizlenir. Hızı ayarlamak için ya ingilizce olarak slow veya fast kullanacaksınız ya da milisaniye cinsinden zamanı kendiniz gireceksiniz.

toggle("slow") - toggle("fast") => İçerik sırasıyla yavaş (600ms) ve hızlı (200ms) şekilde gösterilir veya gizlenir.

toggle(5000) => İçerik 5 saniye içerisinde gösterilir veya gizlenir. (5000 milisaniye = 5 saniye)