En son web geliştirme öğreticiler
 

jQuery Efektler - Animasyon

❮ Önceki Sonraki Bölüm ❯

JQuery animate() metodu özel animasyonlar oluşturmanızı sağlar.



jQuery

jQuery animasyonlar - animate() Yöntem

JQuery animate() metodu özel animasyonlar oluşturmak için kullanılır.

Syntax:

$( Gerekli parametreler Parametre CSS özelliklerini animasyonlu olarak tanımlar.

Opsiyonel hız parametresi etki süresini belirtir. Aşağıdaki değerleri alabilir: "slow", "fast" veya milisaniye.

isteğe bağlı geri çağırma parametresi animasyon tamamlandıktan sonra yürütülecek bir fonksiyonudur.

Aşağıdaki örnek, basit bir kullanımını gösterir animate() yöntemi; Bir hamle <div> bu 250px sol özelliğini ulaşana kadar sağa eleman:

Örnek

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

Varsayılan olarak, tüm HTML öğelerini statik bir konuma sahiptir ve taşınamaz.
Konumunu manipüle etmek için, ilk önce elemanın CSS pozisyon özelliğini ayarlamayı unutmayın relative, fixed veya absolute !

jQuery animate() - Çoklu vasıflarını idare

Birden özellikler aynı anda hareketli olabilir dikkat edin:

Örnek

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

Is it possible to manipulate ALL CSS properties with the animate() method?

Evet neredeyse! Ile kullanıldığında tüm özellik adları deve kasalı olması gerekir: Ancak hatırlanması gereken önemli bir şey yoktur animate() yöntemiyle: Sen yazmak gerekecek paddingLeft yerine padding-left, marginRight yerine margin-right , vb.

Ayrıca, renkli animasyon jQuery kütüphanesinin dahil değildir.
Eğer rengini animasyonlu istiyorsanız, indirmek gerek Renk Animasyonlar eklentisi jQuery.com dan.

jQuery animate() - Bağıl değerleri kullanma

Aynı zamanda, görece değerler tanımlamak mümkündür (değeri daha sonra elemanın akım değerine göre değişir). Bu koyarak yapılır += veya -= değeri önünde:

Örnek

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

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

Hatta bir tesisin animasyon değeri belirtebilirsiniz "show", "hide" veya "toggle" :

Örnek

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

jQuery animate() - sıra İşlevsellik kullanır

Varsayılan olarak, jQuery animasyonlar için kuyruk fonksiyonludur.

Bu, birden yazarsanız anlamına gelir animate() birbirleri sonra, jQuery bir oluşturur çağıran "internal" Bu yöntem çağrıları ile kuyruğu. Sonra hareketlendirmek tek tek çağırır çalışır.

Birbirinize sonra farklı animasyonlar gerçekleştirmek istiyorsak, biz kuyruk işlevselliğinden yararlanmak:

Ö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");
}); 
Kendin dene "

İlk Aşağıdaki örnek hamle <div> sağa elemanı 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");
}); 
Kendin dene "

Egzersizleri ile Yourself test edin!

Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Alıştırma 4»

jQuery Etkileri Referans

Tüm jQuery etkilerin tamamını görmek için lütfen gidin lütfen jQuery Etkisi Referans .


❮ Önceki Sonraki Bölüm ❯