JQuery fadeIn() , fadeOut() , fadeToggle() ve fadeTo() Efekt Kullanımı

nhtctn nhtctn

Bu dersimizde ise jQuery fadein() , faedout() , fadetoggle() ve fadeto() efektlerini inceleyeceğiz. Bu efektler yapılacak işlemi yavaş bir şekilde gerçekleştirir. Hide ve Show metodları ile arasında ki farkları anlamak için aşağıdaki örneklerimizi inceleyelim.

Kullanımı yine aynıdır ve iki parametre alır.

Yine aynı şekilde 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="fadein">Fade In</button>
    <button id="fadeout">Fade Out</button>
    <button id="fadetoggle">Fade Toggle</button>
    <button id="fadeto">Fade To</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 fadeIn()

Hide fonksiyonundan farkı soluk bir şekilde efekti görünü hale getirmektedir. Yani buharlaşarak gösterilmeyi sağlar.

JQuery fadeOut()

jQuery fadeout() metodumuz ise fadein() metodunun tam tersine var olan Html elementlerimiz soluk bir şekilde gizlenmesini sağlar. Yine aynı şekilde parametre alabilirler. Aldıkları parametreler Saniye , Slow yada Fast şeklinde olabilir. Yani buharlaşarak kaybolmayı sağlar.

JQuery fadeToggle()

FadeToggle() metodumuz ise tek bir işlem ile Html elementimizi gizli ise göstermeye , gösteriliyor ise gizlemeye yarayan bir metodumuz dur. Gizleme ve gösterme işlevini tek başına yapar.

JQuery fadeTo()

Bu dersimizin son metodu ise fadeto() efekti. Bu metod 0 ile 1 arasında bir opacity değeri alır. Yazım şekli ise aşağıdaki gibidir.

$(selector).fadeTo(speed,opacity,callback);

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

<script>
        //Fade In,Fade Out,Fade Toggle,Fade To Mettotları
        $(function () {
            $("#fadein").click(function () {
                $("p").fadeIn(2000);
            });


            $("#fadeout").click(function () {
                $("p").fadeOut(1000);
            });


            $("#fadetoggle").click(function () {
                $("p").fadeToggle("slow");
            });

            $("#fadeto").click(function () {
                $("p").fadeTo("slow", 0.5);
            });
        });
    </script>

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

Yorum yazın

BENZER YAZILAR