jQuery Etkileri - Animasyon

jQuery animate() yöntemi, özelleştirilmiş animasyonlar oluşturmanıza olanak tanır.

Etki Gösterimi



jQuery

jQuery Animasyon - animate() Yöntemi

jQuery animate() yöntemi, özelleştirilmiş animasyonlar oluşturmak için kullanılır.

Gramer:

$(seçici).animate({params},speed,callback);

Gerekli params Parametre, animasyon oluşturmak için kullanılacak CSS özelliklerini tanımlar.

Opsiyonel speed Parametre, etkisinin süresini belirler. Aşağıdaki değerleri alabilir: "slow", "fast" veya milisaniye.

Opsiyonel callback Parametre, animasyon tamamlandıktan sonra çalıştırılacak fonksiyon adıdır.

Aşağıdaki örnek, animate() yönteminin basit bir kullanımını gösterir; <div> elementini solda 250 piksel kadar ileri taşır:

Örnek

$("button").click(function(){
  $("div").animate({left:'250px'});
});

Kişisel olarak deneyin

İpucu:Varsayılan olarak, tüm HTML elementleri sabit bir konumdadır ve hareket ettirilemez.

Konumu işlemek için, öncelikle elementin CSS position özelliğini relative, fixed veya absolute olarak ayarlamayı unutmayın!

jQuery animate() - Birden fazla özellik işlemek

Dikkat edin, animasyon oluşturma sürecinde birden fazla özellik kullanılabilir:

Örnek

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

Kişisel olarak deneyin

İpucu:animate() yöntemi ile tüm CSS özelliklerini mi işlemek mümkün?

Evet, neredeyse! Ancak, unutmamız gereken önemli bir şey var: animate() kullanılırken, tüm özellik adlarını Camel işaretli yazılmış olmalıdır, örneğin, padding-left yerine paddingLeft, margin-right yerine marginRight gibi.

Aynı zamanda, renk animasyonları temel jQuery kütüphanesinin içeriğinde bulunmamaktadır.

Renk animasyonları oluşturmak için jQuery.com'dan Color Animations eklentisini indirmeniz gerekecek.

jQuery animate() - Nispi değerleri kullanma

Ayrıca, nispi değerler (bu değerler, elementin mevcut değerine göre nispetinde) tanımlayabilirsiniz. Değerin önüne += veya -= eklemelisiniz:

Örnek

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

Kişisel olarak deneyin

jQuery animate() - Önceden tanımlanmış değerleri kullanma

Hatta, özelliklerin animasyon değerlerini "show"、"hide" veya "toggle" olarak ayarlayabilirsiniz:

Örnek

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

Kişisel olarak deneyin

jQuery animate() - Dizgi özelliğini kullanma

Varsayılan olarak, jQuery animasyonlar için dizgi özelliğini sağlar.

Bu, birbirinin ardından birçok animate() çağrısı yazdığınızda, jQuery'nin bu yöntem çağrılarını içeren "iç" dizisini oluşturduğunu anlamına gelir. Ardından bu animate çağrılarını tek tek çalıştırır.

Örnek 1

Eğer birbirinin ardından farklı animasyonlar gerçekleştirmek istiyorsanız, dizgi özelliğini kullanmamız gerekecek:

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

Kişisel olarak deneyin

Örnek 2

Aşağıdaki örnek, <div> elementini sağa taşıyıp, metin boyutunu artırır:

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

Kişisel olarak deneyin