JQuery slideDown(), slideUp(), slideToggle() Kullanımı

Bu yazımızda Jquery de slideDown, slideUp ve slideToggle metodları ile Html etiketlerini efektif olarak aşağı-yukarı nasıl açılır-kapanır yapabiliriz onu öğreneceğiz.

slideUp metodu bir etiketi yukarı doğru kapatarak gizlememizi sağlarken, slideDown metodu gizlenen etiketi tekrardan aşağı doğru açarak görünür hale getirmemizi sağlar.

slideToggle metodu ise aynı efektleri vererek 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.

Her metodun 3 farklı kullanım şekli var.

  1   Herhangi bir parametre almadan slideDown(), slideUp(), slideToggle() haliyle kullanırsak hızlı bir şekilde 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ı.

slideDown(3000), slideUp(3000), slideToggle(3000)

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

Örneğin yavaş bir efekt vermek istiyorsak slideDown(“slow”), slideUp(“slow”), slideToggle(“slow”) şeklinde yazabiliriz.

Ş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.

jquery-efektleri-display-block

jquery-efektleri-display-none

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

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

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link