jQuery hide(), show(), toggle() Metodları ve Kullanımları

Bu yazımızda jQuery’de hide, show ve toggle fonksiyonları ile Html öğelerini nasıl gizleyebilir ve tekrardan nasıl görünür hale getirebiliriz onu öğreneceğiz.

Şimdi sırasıyla bu fonksiyonların ne işe yaradığını ve nasıl kullanıldığını inceleyelim.

Daha sonra da tüm fonksiyonları aynı anda içeren bir uygulama yapalım. Böylece fonksiyonların birbirinden farkını daha iyi anlayabiliriz.

hide() fonksiyonu : Bir Html öğesini gizlememizi sağlar. 3 farklı kullanım şekli vardır:

  1   Herhangi bir parametre vermeden yani hide() şeklinde kullanırsak bu fonksiyonu uyguladığımız Html öğesi bir efekt uygulanmadan çok hızlı bir şekilde gizli durumuna geçer.

  2   Milisaniye türünden parametre verebiliriz. Örneğin Html öğesinin gizlenme süresinin 3 saniyede gerçekleşmesini istiyorsak parametre olarak 3000 değeri vermeliyiz.

  3   Son olarak rakamsal değer vermek yerine “slow”, “normal”, “fast” parametrelerinden birini vererek efektlerimizi yavaş, normal veya hızlı bir şekilde gerçekleştirebiliriz.

Örneğin yavaş bir efekt vermek istiyorsak:

jQuery Show() Fonksiyonu

show() fonksiyonu : Gizli durumda olan bir Html öğesini tekrardan görünür hale getirmemizi sağlar. 3 farklı kullanım şekli vardır:

  1   Herhangi bir parametre vermeden yani show() şeklinde kullanırsak bu fonksiyonu uyguladığımız Html öğesi bir efekt uygulanmadan çok hızlı bir şekilde görünür durumuna geçer.

  2   Milisaniye türünden parametre verebiliriz. Örneğin Html öğesinin gösterilme süresinin 3 saniyede gerçekleşmesini istiyorsak parametre olarak 3000 değeri vermeliyiz.

  3   Son olarak rakamsal değer vermek yerine “slow”, “normal”, “fast” parametrelerinden birini vererek efektlerimizi yavaş, normal veya hızlı bir şekilde gerçekleştirebiliriz.

Örneğin yavaş bir efekt vermek istiyorsak:

toggle() fonksiyonu : Html öğesi 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. 3 farklı kullanım şekli vardır:

  1   Herhangi bir parametre vermeden yani toggle() şeklinde kullanırsak bu fonksiyonu uyguladığımız Html öğesi bir efekt uygulanmadan çok hızlı bir şekilde gizli – görünür / görünür – gizli durumuna geçer.

  2   Milisaniye türünden parametre verebiliriz. Örneğin Html öğesinin gizle – göster / göster – gizle süresinin 3 saniyede gerçekleşmesini istiyorsak parametre olarak 3000 değeri vermeliyiz.

  3   Son olarak rakamsal değer vermek yerine “slow”, “normal”, “fast” parametrelerinden birini vererek efektlerimizi yavaş, normal veya hızlı bir şekilde gerçekleştirebiliriz.

Örneğin yavaş bir efekt vermek istiyorsak:

Artık bu fonksiyonları içerisinde barındıran uygulamamıza geçebiliriz.

Html Kodları

Css Kodları

jQuery Kodları

Gördüğünüz gibi hide, show ve toggle fonksiyonlarını 3 farklı şekilde kullandık. Aşağıdaki uygulama üzerinde butonlara tıklayarak efektleri inceleyebilirsiniz.

Son olarak şunu söylemek istiyorum:

Bu fonksiyonların arka planda neler yaptığını bilmemizde de fayda var.

Burada div etiketi gizlendiğinde tarayıcıda sağ tıklayıp incele derseniz, div’in display değerinin none olarak değiştiğini görebilirsiniz.

 ⇒  Div Hala Görünüyorken

jquery-efektleri-display-block

 ⇒  Div Gizli Hale Geldiğinde

jquery-efektleri-display-none

Umarım “jQuery hide(), show(), toggle() Fonksiyonları ve Kullanımları” başlıklı yazım sizin için faydalı olmuştur.

Şu yazılar da ilginizi çekebilir.

jQuery fadeOut(), fadeIn(), fadeToggle(), fadeTo() Metodları ve Kullanımları

jQuery slideDown(), slideUp(), slideToggle() Metodları ve Kullanımları

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

Yorum Yazın

650+ ABONE ARASINA KATIL

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Bilgisayar, Telefon, Android, Veri Güvenliği ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.

Abone olduğunuz için teşekkürler.

Birşeyler yanlış gitti.