tutorial pengembangan web terbaru
 

jQuery Efek - Animasi

❮ Sebelumnya Berikutnya Bab ❯

JQuery animate() metode memungkinkan Anda membuat animasi kustom.



jQuery

jQuery Animasi - The animate() Metode

JQuery animate() metode yang digunakan untuk membuat animasi kustom.

Sintaksis:

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

Parameter params yang diperlukan mendefinisikan sifat CSS untuk animasi.

Opsional kecepatan parameter menentukan durasi efek. Hal ini dapat mengambil nilai-nilai berikut: "slow", "fast" , atau milidetik.

Opsional callback parameter adalah fungsi yang akan dieksekusi setelah animasi selesai.

Contoh berikut menunjukkan penggunaan sederhana dari animate() metode; bergerak a <div> elemen ke kanan, sampai telah mencapai properti kiri 250px:

Contoh

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

Secara default, semua elemen HTML memiliki posisi statis, dan tidak dapat dipindahkan.
Untuk memanipulasi posisi, ingat untuk pertama mengatur properti posisi CSS elemen yang relative, fixed , atau absolute !

jQuery animate() - Memanipulasi Beberapa Properti

Perhatikan bahwa beberapa properti dapat animasi pada saat yang sama:

Contoh

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

Apakah mungkin untuk memanipulasi SEMUA properti CSS dengan animate() metode?

Ya, hampir! Namun, ada satu hal penting untuk diingat: semua nama properti harus unta-cased bila digunakan dengan animate() metode: Anda akan perlu menulis paddingLeft bukannya padding-left, marginRight bukan margin-right , dan sebagainya.

Juga, animasi warna tidak termasuk dalam inti jQuery perpustakaan.
Jika Anda ingin menghidupkan warna, Anda perlu men-download plugin yang Color Animasi dari jQuery.com.

jQuery animate() - Menggunakan Nilai Relatif

Hal ini juga memungkinkan untuk mendefinisikan nilai-nilai relatif (nilai ini kemudian dibandingkan dengan nilai saat ini elemen). Hal ini dilakukan dengan meletakkan += atau -= di depan nilai:

Contoh

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

jQuery animate() - Menggunakan Nilai Pra-didefinisikan

Anda bahkan dapat menentukan nilai animasi properti sebagai "show", "hide" , atau "toggle" :

Contoh

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

jQuery animate() - Menggunakan Antrian Fungsi

Secara default, jQuery dilengkapi dengan fungsi antrian untuk animasi.

Ini berarti bahwa jika Anda menulis beberapa animate() panggilan setelah satu sama lain, jQuery menciptakan "internal" antrian dengan metode panggilan tersebut. Kemudian berjalan bernyawa panggilan ONE oleh ONE.

Jadi, jika Anda ingin melakukan animasi yang berbeda setelah satu sama lain, kita mengambil keuntungan dari fungsi antrian:

contoh 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");
}); 
Cobalah sendiri "

Contoh di bawah ini pertama bergerak <div> elemen ke kanan, dan kemudian meningkatkan ukuran font dari teks:

contoh 2

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

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 » Latihan 4»

jQuery Efek Referensi

Untuk gambaran lengkap dari semua efek jQuery, silahkan ke kami jQuery Efek Referensi .


❮ Sebelumnya Berikutnya Bab ❯