JQuery Animasyonları
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");
});
});
Konu Örnekleri kısmında tüm örneklerin tam kodlarını görebilir, değiştirebilir ve sonucu görebilirsin.
jquery animasyon oluşturma, animate metodu kullanımı örnekleri, jquery animate examples, jquery ile css değerlerini değiştirme animasyon yapma
KONU İLE İLGİLİ ÖRNEKLER
|
Animasyonları sırayla oynatma - animasyon kuyruğu
|
Kendin Dene
|
Kodları görmek ve değiştirmek için Kendin Dene butonuna tıkla.
Bu örnekteki JQuery fonksiyonu şu şekilde de yazılabilir:
$("#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");
});
|
Css özelliklerine show-hide-toggle uygulama
|
Kendin Dene
|
Kodları görmek ve değiştirmek için Kendin Dene butonuna tıkla.
|
Css özelliğini her seferinde belli bir miktar artırma
|
Kendin Dene
|
Kodları görmek ve değiştirmek için Kendin Dene butonuna tıkla.
|
Birden çok css özelliğini aynı anda değiştirerek animasyon oluşturma
|
Kendin Dene
|
Kodları görmek ve değiştirmek için Kendin Dene butonuna tıkla.
Kodları görmek ve değiştirmek için Kendin Dene butonuna tıkla.
10857 kez okundu.