JQuery fadeOut(), fadeIn(), fadeToggle(), fadeTo() Kullanımı

Bu yazımızda Jquery de fadeOut, fadeIn, fadeToggle ve fadeTo metodları ile Html etiketlerini efektif bir şekilde nasıl gizleyebilir ve tekrar nasıl görünür hale getirebiliriz onu öğreneceğiz.

fadeOut metodu bir etiketi efektif olarak gizlememizi sağlarken, fadeIn metodu gizlenen etiketi efektif olarak tekrardan görünür hale getirmemizi sağlar.

fadeToggle metodu ise etiket görünür durumdaysa gizlemeyi, gizli durumdaysa görünür hale getirmemizi sağlar. Yani Gizle-Göster, Göster-Gizle işlevi görür.

fadeTo metodu, ikinci bir parametre olarak 0 ile 1 arasında opacity değeri alır. Bir etiketin opacity değeri 1’den 0’a doğru azaldıkça görünürlüğüde azalır.

fadeOut, fadeIn, fadeToggle metodlarının 3 farklı kullanım şekli varken fadeTo metodunun 2 farklı kullanım şekli var.

  1   Herhangi bir parametre almadan fadeOut(), fadeIn(), fadeToggle() haliyle kullanırsak varsayılan haliyle efektif olarak gizli veya görünür duruma geçer.

  2   Metodlara milisaniye türünden zaman değeri verilebilir. Örneğin efektlerin 3 saniyede gerçekleşmesini istiyorsak şu şekilde 3000 değeri almalı.

fadeOut(3000), fadeIn(3000), fadeToggle(3000), fadeTo(3000,0.4)

  3   Son olarak rakamsal değer vermek yerine “slow”, “normal”, “fast” değerlerinden birini vererek de efektlerimizi gerçekleştirebiliriz.

Örneğin yavaş bir efekt vermek istiyorsak fadeOut(“slow”), fadeIn(“slow”), fadeToggle(“slow”), fadeTo(“slow”,0.2) şeklinde yazabiliriz.

Gördüğünüz gibi fadeTo metodunun diğerlerinden farkı, hız parametresi verildikten sonra birde opacity değeri veriyoruz. Böylece uyguladığımız etiketin şeffaflık değeri verdiğimiz değere kadar azalmış oluyor.

Şimdi kodlarımıza ve örnek uygulamamıza geçelim.

Html Kodları

Css Kodları

Jquery Kodları

Gördüğünüz gibi metodlarımızı 3 farklı yol ile yazdık.

Uygulama üzerinde butonlara tıklayarak efektleri inceleyebilirsiniz.

Burada aslında gerçekleşen olay div etiketimiz gizlendiğinde tarayıcıda sağ tıklayıp incele derseniz, div’in display değerinin none olarak değiştiğini görebilirsiniz.

Aynı şekilde fadeTo metodu ile opacity değerini değiştirdiğimiz takdirde div’in opacity değerinin değiştiğini görebilirsiniz.

jquery-efektleri-display-none

jquery-efektleri-opacity

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Leave a Reply