En son web geliştirme öğreticiler
 

jQuery animate() Method

<JQuery etkisi Yöntemleri

Örnek

onun yüksekliğini değiştirerek, bir öğe "Animasyon":

$("button").click(function(){
    $("#box").animate({height: "300px"});
});
Kendin dene "

Tanımı ve Kullanımı

animate() metodu CSS özellikleri, bir dizi özel bir animasyon gerçekleştirir.

Bu yöntem CSS stilleri ile başka bir durumdan bir öğe değiştirir. CSS özellik değeri bir animasyon efekti oluşturmak için, kademeli olarak değiştirilir.

Sadece sayısal değerler hareketli olabilir (like "margin:30px" ) . Dize değerleri animasyonlu olamaz (like "background-color:red" ) dizeleri dışında "show", "hide" ve "toggle" . Bu değerler gizleme ve animasyonlu elemanını gösteren izin.

Tip: Kullanım "+=" "-=" "+=" "-=" için göreceli animasyonlar.

Sözdizimi

( Parametre Açıklama styles Gereklidir. animasyon için bir veya daha fazla CSS özelliklerini / değerlerini belirtir.

Note: ile kullanıldığında özellik adları deve kasalı olmalıdır animate() yönteminin: Sen yerine paddingLeft yazmak gerekir padding-left, marginRight yerine benzeri margin-right ve.

animasyonlu olabilir Özellikleri:


Sadece sayısal değerler hareketli olabilir (like "margin:30px" ) . Dize değerleri animasyonlu olamaz (like "background-color:red" ) dizeleri dışında "show", "hide" ve "toggle" . Bu değerler gizleme ve animasyonlu elemanını gösteren izin.

Tip: Renkli animasyonlar jQuery kütüphanesinin dahil değildir. Eğer rengini animasyonlu istiyorsanız, indirmek gerekir Renk Animasyonlar eklentisi gelen jQuery.com speed İsteğe bağlı. animasyonun hızını belirler. Varsayılan değer 400 milisaniye

Olası değerler:

  • milisaniye (like 100, 1000, 5000, etc)
  • "slow"
  • "fast"
easing İsteğe bağlı. animasyon farklı noktalarında elemanın hızını belirtir. Varsayılan değer "swing" . Olası değerler:
  • "swing" - hızlı ortada başlangıcı / sonu yavaş hareket eder, fakat
  • "linear" - sabit bir hızda hareket eder
Tip: Daha hafifletilmesi fonksiyonlar harici eklentiler mevcuttur. callback İsteğe bağlı. Animasyon tamamlandıktan sonra bir fonksiyon yürütülecek. Callback'inde hakkında daha fazla bilgi edinmek için lütfen okuyun jQuery geri arama bölüm

Alternatif Sözdizimi

( Parametre Açıklama styles Gereklidir. bir ya da daha fazla CSS özelliklerini belirtir / değerler animasyon (yukarıda olası değerler bakınız) options İsteğe bağlı. animasyon için ek seçenekler belirtir. Olası değerler:
  • duration - animasyon hızını ayarlar
  • easing - belirtir kolaylaştırılması işlevini kullanmak için
  • complete - animasyon tamamlandıktan sonra yürütülecek bir işlevi belirtir
  • step - animasyon her adım için yürütülecek bir fonksiyonu belirtir
  • progress - animasyonda her adımdan sonra yürütülecek bir işlevi belirtir
  • queue - Bir Boolean değeri etkiler kuyrukta animasyon yerleştirmek için olmadığını belirterek
  • specialEasing - bir veya daha fazla CSS özellikleri gösteren bir harita > stilleri parametresi ve bunlara karşılık gelen hafifletilmesi işlevleri
  • start - bir işlevi belirtir animasyon başladığında yürütülecek
  • done - belirtir bir işlev yürütülecek zaman animasyon uçlarını
  • fail - animasyon tamamlamak için başarısız olursa yürütülecek bir işlevi belirtir
  • always - animasyon tamamlamadan durursa yürütülecek bir işlevi belirtir

it Yourself deneyin - Örnekler

Kullanma animate() bir geri arama fonksiyonu ile
Nasıl kullanılır animate() animasyon tekrarlar bir geri arama fonksiyonu ile.

Alternatif Kullanımı Örnek
Birden animasyon stilleri ve seçenekleri belirlemek için alternatif sözdizimi kullanma.

Kullanılması animate() bir ilerleme çubuğu oluşturmak için
Nasıl kullanılır animate() bir ilerleme çubuğu oluşturmak için bir yöntem.

Sayfa çapa kadar düzgün kaydırma ekle
Nasıl kullanılır animate() bağlantıları düzgün kaydırma ekleyin.

<JQuery etkisi Yöntemleri