JQuery Efektleri – animate() Kullanımı

nhtctn nhtctn

Bu dersimizde sizlere jQuery animate() metodunu anlatmaya çalışacağım. Seçtiğimiz bir Html elementine dilediğimiz şekilde hareket ettirebiliriz.

Bu metodu kullanabilmek için biraz da olsa Css bilgisine sahip olmalıyız. Eğer bilginiz yok ise Css konularına bakmanızı tavsiye ederim.

Yazım şekli aşağıdaki gibidir.

$(selector).animate({params},speed,callback);
   <button id="animate">Animate</button>
    <div class="box">
        jquery
    </div>
 <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;
        }
        .box {
            position: relative;
            top: 100px;
            left: 10px;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </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.

 <script>
        $("#animate").click(function () {
            var box = $(".box");
            box.animate({
                left: "200px",
                width: "300px",
                height: "300px",


            }, "slow", function () {
                alert("Animasyon Bitti");
            })
            box.animate({
                fontSize: "30px",
            }, "slow")
        });
    </script>

Yorum yazın

BENZER YAZILAR