JQuery hide(), show(), toggle() Kullanımı

Merhaba Arkadaşlar,
Bu makalede Jquery’de hide(), show() ve toggle() metodları ile Html etiketlerini nasıl gizleyebilir ve tekrar nasıl görünür hale getirebiliriz onu öğreneceğiz.hide() metodu bir etiketi gizlememizi sağlarken, show() metodu gizlenen etiketi tekrardan görünür hale getirmemizi sağlar.toggle() 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.Her metodun 3 farklı kullanım şekli var :

1 – Herhangi bir parametre almadan hide(), show(), toggle() haliyle kullanırsak bir efekt olmadan çok 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ı.hide(3000), show(3000), toggle(3000).

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, hide(“slow”), show(“slow”), toggle(“slow”) şeklinde yazabiliriz.

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

Html kodlarımız,

Css kodlarımız,

Jquery kodlarımız ise şu şekilde,

Gördüğünüz gibi metodlarımızı 3 farklı yol ile yazdık.Uygulama üzerinde butonlara tıklayarak efektleri inceleyebilirsiniz.

Burda 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

Yeni bir makalede görüşmek üzere.

Önceki : JQuery Dersleri 4 – Olaylar

Sonraki : JQuery Dersleri 6 – fadeOut(), fadeIn(), fadeToggle(), fadeTo() Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +