jQuery Efektleri - Animasyon

❮ Öncesi Sonraki ❯

jQuery ile özel animasyonlar oluşturabilirsiniz.

jQuery

jQuery Animations - animate() Yöntemi

Özel animasyonlar oluşturmak için jQuery animate()yöntemi kullanılır.

Sözdizimi:

$(selector).animate({params},speed,callback);

Gerekli params parametresi, canlandırılacak CSS özelliklerini tanımlar.

İsteğe bağlı hız parametresi, etkinin süresini belirtir. Şu değerleri alabilir: "yavaş", "hızlı" veya milisaniye.

İsteğe bağlı geri arama parametresi, animasyon tamamlandıktan sonra yürütülecek bir işlevdir.

Aşağıdaki örnek, animate()yöntemin basit bir kullanımını gösterir; 250 piksellik bir sol özelliğe ulaşana kadar bir <div> öğesini sağa hareket ettirir:

Örnek

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

Varsayılan olarak, tüm HTML öğelerinin statik bir konumu vardır ve taşınamaz.
Konumu değiştirmek için, önce öğenin CSS konum özelliğini göreli, sabit veya mutlak olarak ayarlamayı unutmayın!

jQuery animate() - Birden Çok Özelliği Değiştir

Birden çok özelliğin aynı anda canlandırılabileceğine dikkat edin:

Örnek

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

animate() yöntemiyle TÜM CSS özelliklerini değiştirmek mümkün müdür?

Evet neredeyse! Ancak hatırlanması gereken önemli bir şey var: animate() yöntemiyle kullanıldığında tüm özellik adları büyük harfle yazılmalıdır: padding-left yerine paddingLeft, margin-right yerine marginRight vb. yazmanız gerekir.

Ayrıca, renk animasyonu çekirdek jQuery kitaplığına dahil değildir.
Rengi canlandırmak istiyorsanız , jQuery.com'dan Color Animations eklentisini indirmeniz gerekir.

jQuery animate() - Göreli Değerleri Kullanma

Göreceli değerleri tanımlamak da mümkündür (bu durumda değer, elemanın mevcut değerine göredir). Bu, değerin önüne += veya -= koyarak yapılır:

Örnek

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

jQuery animate() - Önceden Tanımlanmış Değerleri Kullanma

Hatta bir özelliğin animasyon değerini " show", " hide" veya " toggle" olarak belirtebilirsiniz:

Örnek

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

jQuery animate() - Kuyruk İşlevini kullanır

Varsayılan olarak jQuery, animasyonlar için kuyruk işleviyle birlikte gelir.

animate()Bu, birbiri ardına birden çok çağrı yazarsanız, jQuery'nin bu yöntem çağrılarıyla bir "dahili" kuyruk oluşturduğu anlamına gelir . Ardından, ONE by ONE animate çağrılarını çalıştırır.

Bu nedenle, birbiri ardına farklı animasyonlar yapmak istiyorsanız, sıra işlevinden yararlanıyoruz:

örnek 1

$("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");
});

Aşağıdaki örnek, önce <div>öğeyi sağa taşır ve ardından metnin yazı tipi boyutunu artırır:

Örnek 2

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

jQuery Alıştırmaları

jQuery Efektleri Referansı

Tüm jQuery efektlerine tam bir genel bakış için lütfen jQuery Effect Reference sayfamıza gidin .

❮ Öncesi Sonraki ❯

jQuery Eğitimi