Efek jQuery - Animasi
Metode jQuery animate () memungkinkan Anda untuk membuat animasi kustom.
jQuery animasi - bernyawa () metode
Metode jQuery animate () digunakan untuk membuat animasi kustom.
sintaks:
parameter yang diperlukan params mendefinisikan pembentukan sifat CSS animasi.
Opsional kecepatan parameter menentukan durasi efek. Ini dapat mengambil nilai berikut: "lambat", "cepat", atau milidetik.
Opsional callback parameter adalah nama dari fungsi dieksekusi setelah selesai.
Contoh berikut menunjukkan metode aplikasi bernyawa sederhana (). Ini <div> elemen ke kanan untuk memindahkan 250 piksel:
Secara default, semua elemen HTML memiliki posisi statis dan tidak bisa bergerak. Untuk posisi operasi, mengingat atribut posisi elemen CSS set pertama untuk relatif, tetap atau mutlak! |
jQuery animate () - beroperasi beberapa properti
Harap dicatat bahwa proses menghasilkan animasi dapat menggunakan beberapa properti:
contoh
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
Coba »
Anda dapat menghidupkan (metode) untuk mengoperasikan semua atribut CSS? Ya, hampir! Namun, hal penting untuk diingat: Bila menggunakan bernyawa (), menulis semua nama atribut harus menggunakan notasi Camel, misalnya, harus digunakan sebagai pengganti paddingLeft padding-kiri, daripada menggunakan marginRight margin-right, dll . Pada saat yang sama, animasi warna tidak termasuk dalam inti jQuery perpustakaan. Jika Anda perlu untuk menghasilkan animasi warna, Anda perlu jquery.com men-download Color Animasi Plugin. |
jQuery animate () - penggunaan nilai relatif
Anda juga dapat menentukan nilai relatif (nilai relatif terhadap nilai saat ini dari elemen). Perlu mendahului nilai dengan + = atau - =:
contoh
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
Coba »
() JQuery bernyawa - menggunakan nilai yang telah ditetapkan
Anda bahkan dapat menempatkan nilai properti animasi untuk "show", "menyembunyikan" atau "beralih":
jQuery animate () - Menggunakan fungsi Antrian
Secara default, jQuery menyediakan kemampuan antrian untuk animasi.
Ini berarti bahwa jika Anda menulis lebih dari satu demi satu bernyawa () panggilan, jQuery akan membuat metode panggilan ini "internal" antrian. Kemudian satu per satu untuk menjalankan ini menghidupkan panggilan.
contoh 1
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");
});
Coba »
Contoh berikut dari elemen <div> dipindahkan ke kanan 100 piksel, dan kemudian meningkatkan ukuran teks:
contoh 2
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
Coba »