JQuery Show(),Hide(),Toggle() Efekt Kullanımı

nhtctn nhtctn

Bu dersimizde jQuery hide() ve show() ve toggle() efektlerini inceleyeceğiz. Hide() efekti seçtiğimiz bir Html elementini gizlemek için kullanılır, show() efekti ise gizli olan bir Html elementini göstermek için kullanılır. Toggle ise hide() ve show() metotlarını peşi sıra uygular. Bu efektler 2 parametre alır. Şimdi inceleyelim.

Kullanımı aşağıdaki görselde olduğu gibidir.

Parametre verme zorunluluğu yoktur. Ama speed gibi parametre belirterek daha görsel işlemler yapmak mümkündür.

Speed değeri olarak “slow” veya “fast” değerleri verilebilir. Ya da milisaniye cinsinden değer verilerek istediğimiz süreyi verebiliriz. Örneğin 3000 (3 saniye) şeklinde.

Callback ise bir geri çağırma (callback) fonksiyonu, mevcut efekt %100 tamamlandıktan sonra icra edilen bir fonksiyondur.

<p>ÇETİN YAZILIM İLE JQUERY ÖĞRENİYORUM.</p>

    <button id="hide">Hide</button>
    <button id="show">Show</button>
    <button id="toggle">Toggle</button>
<style>
        p {
            text-align: center;
            color: green;
            font-size: 50px;
        }

        button {
            position: relative;
            left: 500px;
            top: 25px;
            background-color: yellow;
            font-size: 30px;
            font-weight: bold;
            width: 200px;
            height: 75px;
        }
    </style>

Çıktı

JQuery Hide()

Hide() fonksiyonu yardımıyla istediğimiz elemanı gizlemeyi sağlamaktadır. Yani display görünümünü none yapmaktadır.

JQuery Show()

Show() fonksiyonu gizlediğimiz elemanı göstermeyi sağlamaktadır. Yani display none görünümünü silmektedir .

JQuery Toggle()

jQuery toggle() metodu ise eğer Html elementi gösteriliyorsa gizlemeye, eğer gizleniyorsa göstermeye yarayan bir metodumuzdur. Bu bizlere kolaylık sağlamaktadır.

Bir Html elementini gizlemek ve göstermek için iki buton oluşturmak yerine sadece toggle() metodu ile iki işi tek seferde yapabiliriz.

Aşağıda bulunan örneği inceleyebilirsiniz.

 <script>
        $(function () {

            //Hide,Show,Toggle Mettotları
            $("#hide").click(function () {
                $("p").hide("slow", function () {
                    alert("Hide Çalıştı");
                });
            });

            $("#show").click(function () {
                $("p").show(2000);
            });

            $("#toggle").click(function () {
                $("p").toggle("fast");
            });
        });
    </script>

Örneği yapmak için jquery kütüphanesini dahil etmeyi unutmayın !!!

Yorum yazın

BENZER YAZILAR