Jquery Animate Metodu

JQuery Animate metodu kullanılarak html etiketlerine uygulanan Css özellikleri değiştirilebilir ve bu yolla animasyonlar elde edilebilir.

Animate metodunun kullanımı şu şekildedir:

$(selector).animate({parametreler},Hız,callback);

Parametreler kısmına değiştirilecek olan Css özellikleri ve değerleri yazılır.

Hız ve callback parametreleri isteğe bağlı olup kullanılmayabilir.

Hız değeri milisaniye cinsinden bir değer veya slow, fast olabilir.

Callback metodu kullanımı daha önceki konularda anlatılmıştır.

Animate metodu örnekleri: (Örnekler kısmında bu kodları değiştirerek kendin deneyebilirsin.)

$(document).ready(function(){
$("#button1").click(function(){
    $("#kutu1").animate({left: '120px'},2000);
});

$("#button2").click(function(){
    $("#kutu1").animate({width: '180px'},"slow");
});

$("#button3").click(function(){
    $("#kutu1").animate({height: '180px'},"fast");
});
});

JQuery Animasyonu Oluşturma Konusunda Önemli Noktalar:

JQuery animate metodu ile nesnelerin hemen hemen tüm Css özellikleri değiştirilebilir. Ancak renk değişimleri animate metodu ile çalışmayabilir. Animasyon sırasında renk değiştirmek de istiyorsanız http://plugins.jquery.com/ adresinden “Color Animations Plugin” eklentisini indirmeniz gerekir.
Ayrıca animate metodu içinde css özelliklerini yazarken “-“ karakteri kullanmamalıyız. Örneğin margin-left yerine marginLeft yazmalıyız. (Camel Cased yazım standartı)
Nesnelerin hareket ettirilebilmesi için position özellikleri başlangıçta absolute, fixed veya relative yapılmalıdır. (bkz. Position Özelliği)
Ayrıca değiştirilecek olan özelliklerin başlangıç değeri ayarlanmak isterse, css ile ilk değerleri belirlenebilir.

Animate Metodu ile Birden Çok Özelliği Değiştirme

Bir nesnenin birden çok özelliğini aynı anda değiştirerek animasyon oluşturmak da mümkündür.

Örnek:

$(document).ready(function(){
$("#button1").click(function(){
    $("#kutu1").animate({
            left: '120px',
            opacity: '0.3',
            height: '180px',
            width: '180px',
            fontSize:'36pt'
        });
});
});

Css Özelliklerini Belirli Miktarda Artırarak Animasyon Oluşturma

Yukarıdaki örnekte left:’120px’ denilerek kutu1’in 120px sağa doğru kayması sağlanmıştır. Butona tekrar tıklansa da kutu1 zaten belirtilen konuma gelmiş olacağından daha fazla hareket olmayacaktır.

Örneğin kutu1’in butona her tıklandığında 50px sağa kaymasını istersek left:’+=50px’ şeklinde kullanabiliriz.

Örnek:

$(document).ready(function(){
$("#button1").click(function(){
    $("#kutu1").animate({
            left: '+=50px',
            height: '+=10px',
            width: '+=10px',
        });
});
});

Yukarıdaki örnekte buton1’e her tıklandığında kutu1 50px sağa gidecek, genişlik ve yüksekliği ise 10px artacaktır.

Css Değerlerine Show – Hide – Toggle Uygulama

Animate metodu içinde Css özelliklerine belli bir değer vermek yerine Show-hide ve toggle değerleri verilebilir.

Örneğin width:’hide’ şeklinde bir kullanım nesnenin genişliğinin azalarak 0’a düşmesini sağlar.

Örnek:

$(document).ready(function(){
$("#button1").click(function(){
    $("#kutu1").animate({width: 'show'},"slow");
});

$("#button2").click(function(){
    $("#kutu1").animate({width: 'hide'},"slow");
});

$("#button3").click(function(){
    $("#kutu1").animate({width: 'toggle'},"slow");
});
});

Animasyon Kuyruğu – Animasyonları Sırayla Oynatma

Çok sayıda animasyon birbiri ardınca oynatılmak istenirse (bir animasyon bittikten sonra diğeri başlayacak şekilde) aşağıdaki yöntem kullanılabilir.

Örnek:

$(document).ready(function(){
$("#button1").click(function(){
    var nesne = $("#kutu1");
    nesne.animate({height: '200px', opacity: '0.5'}, "slow");
    nesne.animate({width: '200px', opacity: '1'}, "slow");
    nesne.animate({height: '100px', opacity: '0.5'}, "slow");
    nesne.animate({width: '100px', opacity: '1'}, "slow");
});
});

Bu şekilde kullanmak yerine aşağıdaki gibi normal kullanırsak, animasyonlar aynı anda başlar.

$(document).ready(function(){
$("#button1").click(function(){
    $("#kutu1").animate({height: '200px', opacity: '0.5'}, "slow");
    $("#kutu1").animate({width: '200px', opacity: '1'}, "slow");
    $("#kutu1").animate({height: '100px', opacity: '0.5'}, "slow");
    $("#kutu1").animate({width: '100px', opacity: '1'}, "slow");
});
});