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.
jQuery Hide() Fonksiyonu
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.
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").hide(); }); </script> |
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.
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").hide(3000); }); </script> |
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:
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").hide("slow"); }); </script> |
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.
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").show(); }); </script> |
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.
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").show(3000); }); </script> |
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:
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").show("slow"); }); </script> |
jQuery Toggle() Fonksiyonu
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.
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").toggle(); }); </script> |
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.
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").toggle(3000); }); </script> |
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:
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("secici").toggle("slow"); }); </script> |
Artık bu fonksiyonları içerisinde barındıran uygulamamıza geçebiliriz.
Html Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="box"></div> <button id="show">Show( )</button> <button id="hide">Hide( )</button> <button id="toggle">Toggle( )</button> <button id="show-3000">Show(3000)</button> <button id="hide-3000">Hide(3000)</button> <button id="toggle-3000">Toggle(3000)</button> <button id="show-slow">Show("slow")</button> <button id="hide-slow">Hide("slow")</button> <button id="toggle-slow">Toggle("slow")</button> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#box { width: 100%; height: 100px; background-color: blueviolet; } button { margin: 10px; padding: 6px 12px; } |
jQuery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> $(document).ready(function() { $("#hide").click(function() { $("#box").hide(); }); $("#show").click(function() { $("#box").show(); }); $("#toggle").click(function() { $("#box").toggle(); }); $("#hide-3000").click(function() { $("#box").hide(3000); }); $("#show-3000").click(function() { $("#box").show(3000); }); $("#toggle-3000").click(function() { $("#box").toggle(3000); }); $("#hide-slow").click(function() { $("#box").hide("slow"); }); $("#show-slow").click(function() { $("#box").show("slow"); }); $("#toggle-slow").click(function() { $("#box").toggle("slow"); }); }); |
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
⇒ Div Gizli Hale Geldiğinde
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.
, show(), toggle() Metodları ve Kullanımları){kind=link}