JQuery slideDown() , slideUp() ve slideToggle()

nhtctn nhtctn

Bu dersimizde jQuery slideDown() , slideUp() ve slideToggle() efekt metodlarını anlatmaya çalışacağım. 

Parametre alma zorunluluğu yoktur ama istersek verip Html elementlerimizi daha efektif hale getirebiliriz.

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

    <button id="slideup">Slide Up</button>
    <button id="slidedown">Slide Down</button>
    <button id="slidetoggle">Slide Toggle</button>
<style>
        p {
            text-align: center;
            color: green;
            font-size: 50px;
        }

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

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.

JQuery slideDown()

jQuery slideDown() metodu istenilen butona tıkladığında seçilen Html elementinin aşağıya doğru açılmasını sağlar.

JQuery slideUp()

jQuery slideup() metodu slideDown() metodunun tam tersi bir işlem yapar. Yukarı doğru kapanma yapar.

JQuery slideToggle()

jQuery slideToggle() metodumuz ise açıkta olan elementimizi kapatmaya kapalı olan elementimizi ise açmaya yarar. Tek bir buton ile 2 işlev yapmayı sağlar.

  <script>
        //Slide Up,Slide Down,Slide Toggle Mettotları
        $(function () {
            $("#slideup").click(function () {
                $("p").slideUp(2000);
            });


            $("#slidedown").click(function () {
                $("p").slideDown(1000);
            });


            $("#slidetoggle").click(function () {
                $("p").slideToggle("slow");
            });
        });
    </script>

Yorum yazın

BENZER YAZILAR