jQuery fadeIn(), fadeOut(), fadeToggle() ve fadeTo() Fonksiyonları Kullanımı

Bu makalede jQuery'nin fadeIn(), fadeOut(), fadeToggle() ve fadeTo() fonksiyonlarını öğreneceğiz. Bu fonksiyonlar sayesinde elementleri (açılır kapanır div, p vb.) gizleyebilir ya dagösterebiliriz. Fade kelimesinin Türkçe karşılığı soluk demektir, yani içeriğimizin yavaş yavaş belirmesini istiyorsak ya da içeriğimizin soluk şekilde kaybolmasını istiyorsak bu fonksiyonları kullanacağız. Ö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) fadeIn()

Sayfanızdaki elementleri göstermek için fadeIn() 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 kullanırsınız. show() ve slideDown() fonksiyonlarından farkı içeriğin yavaş yavaş belirmesidir (efekt farkı).

Syntax:

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

Örnek Kod:

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

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

fadeIn() => 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.

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

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

2) fadeOut()

Sayfanızdaki elementleri gizlemek için fadeOut() metodunu kullanmanız gerekir. hide() ve slideUp() fonksiyonlarından farkı içeriğin soluk şekilde kaybolmasıdır (efekt farkı).

Syntax:

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

Örnek Kod:

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

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

fadeOut() => 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.

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

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

3) fadeToggle()

fadeToggle() fonksiyonu fadeIn() ve fadeOut() fonksiyonlarının birleşimidir. İçeriğinizi, tıklandığında gizlemek ve tekrar tıklandığında göstermek için bu fonksiyonu kullanırız.

Syntax:

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

Örnek Kod:

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

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

fadeToggle() => 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.

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

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

4) fadeTo()

Sayfanızdaki elementleri gizlemek veya göstermek için fadeTo() metodunu kullanmanız gerekir. fadeTo() metodunun diğerlerinden farkı içeriğin saydamlık değerini belirleyebilmemizdir. İstersek içeriği gizleyebiliriz, istersek yarı saydam yapabiliriz vb.

Syntax:

$(selector).fadeTo(speed,opacity,callback);

Örnek Kod:

    $(document).ready(function(){
        $(".buton").click(function(){
            $(".pencere").fadeTo("slow", 0.5);
        });
    });

Yukarıdaki kodun işlevi çok basit; class'ı buton olan (class="buton") bir elemente tıklayınca class'ı pencere olan (class="pencere") elementi yavaş şekilde 0.5 saydamlık derecesine getir demek. fadeTo() metodunun 3 parametresi vardır. Syntaxda görüldüğü üzere; birincisi hız, ikincisi saydamlık derecesi, üçüncüsü ise işlem bitince ne yapılacak (örnek; uyarı mesajı versin). Şimdilik hız ve saydamlık parametresini inceleyelim.

fadeTo("slow", 0.8) => İçerik yavaş (600ms) şekilde 0.8 derece saydamlığa gelir.

fadeTo("fast",  0.2) => İçerik hızlı (200ms) şekilde 0.2 derece saydamlığa gelir.

fadeTo(5000, 0) => İçerik 5 saniye içerisinde kaybolur. (5000 milisaniye = 5 saniye)