jQuery slideDown(), slideUp() ve slideToggle() Fonksiyonları Kullanımı

Bu makalede jQuery'nin slideDown(), slideUp() ve slideToggle() 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 aşağıdan yukarıya doğru gizler veya yukarıdan aşağıya 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) slideDown()

Sayfanızdaki gizli elementleri göstermek için slideDown() metodunu kullanmanız gerekir. Örneğin div içerisindeki uyarı yazısı bir butona tıklanınca görünsün istiyorsanız bu metodu kullanabilirsiniz. Slide Down kelimesinin Türkçe anlamı aşağı kaydır demektir.

Syntax:

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

Örnek Kod:

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

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. slideDown() 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.

slideDown() => Varsayılan değer 400 milisaniyedir, yani 0.4 saniye içerisinde içerik gösterilir. Hızı ayarlamak için ya ingilizce olarak slow veya fast kullanacaksınız ya da milisaniye cinsinden zamanı kendiniz gireceksiniz.

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

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

2) slideUp()

Sayfanızdaki elementleri gizlemek için slideUp() metodunu kullanmanız gerekir. Slide Up kelimesinin Türkçe anlamı yukarı kaydır demektir.

Syntax:

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

Örnek Kod:

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

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. slideUp() 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.

slideUp() => Varsayılan değer 400 milisaniyedir, yani 0.4 saniye içerisinde içerik kaybolur.  Hızı ayarlamak için ya ingilizce olarak slow veya fast kullanacaksınız ya da milisaniye cinsinden zamanı kendiniz gireceksiniz.

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

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

3) slideToggle()

slideToggle() fonksiyonu slideDown() ve slideUp() 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).slideToggle(speed,callback);

Örnek Kod:

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

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. slideToggle() 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.

slideToggle() => Varsayılan değer 400 milisaniyedir, yani 0.4 saniye içerisinde içerik gösterilir veya kaybolur. Hızı ayarlamak için ya ingilizce olarak slow veya fast kullanacaksınız ya da milisaniye cinsinden zamanı kendiniz gireceksiniz.

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

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