Efek jQuery - Animasi
Dengan jQuery, Anda dapat membuat animasi khusus.
jQuery Animations - Metode animate()
Metode jQuery animate()digunakan untuk membuat animasi kustom.
Sintaksis:
$(selector).animate({params},speed,callback);
Parameter params yang diperlukan menentukan properti CSS yang akan dianimasikan.
Parameter kecepatan opsional menentukan durasi efek. Itu dapat mengambil nilai-nilai berikut: "lambat", "cepat", atau milidetik.
Parameter callback opsional adalah fungsi yang akan dijalankan setelah animasi selesai.
Contoh berikut menunjukkan penggunaan sederhana dari animate()metode ini; itu memindahkan elemen <div> ke kanan, hingga mencapai properti kiri 250px:
Contoh
$("button").click(function(){
$("div").animate({left: '250px'});
});
Secara default, semua elemen HTML memiliki posisi statis, dan tidak dapat dipindahkan.
Untuk memanipulasi posisi, ingatlah untuk terlebih dahulu mengatur properti posisi CSS elemen ke relatif, tetap, atau absolut!
jQuery animate() - Memanipulasi Banyak Properti
Perhatikan bahwa beberapa properti dapat dianimasikan secara bersamaan:
Contoh
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
Apakah mungkin untuk memanipulasi SEMUA properti CSS dengan metode animate()?
Ya hampir! Namun, ada satu hal penting yang perlu diingat: semua nama properti harus menggunakan huruf unta saat digunakan dengan metode animate(): Anda harus menulis paddingLeft sebagai ganti padding-left, marginRight sebagai ganti margin-kanan, dan seterusnya.
Selain itu, animasi warna tidak disertakan dalam pustaka inti jQuery.
Jika Anda ingin menganimasikan warna, Anda perlu mengunduh
plugin Color Animations dari jQuery.com.
jQuery animate() - Menggunakan Nilai Relatif
Dimungkinkan juga untuk menentukan nilai relatif (nilai tersebut kemudian relatif terhadap nilai elemen saat ini). Ini dilakukan dengan meletakkan += atau -= di depan nilai:
Contoh
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
jQuery animate() - Menggunakan Nilai yang Telah Ditentukan sebelumnya
Anda bahkan dapat menentukan nilai animasi properti sebagai " show", " hide", atau " toggle":
Contoh
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
jQuery animate() - Menggunakan Fungsi Antrian
Secara default, jQuery hadir dengan fungsionalitas antrian untuk animasi.
Ini berarti bahwa jika Anda menulis beberapa animate()panggilan satu sama lain, jQuery membuat antrian "internal" dengan panggilan metode ini. Kemudian menjalankan panggilan bernyawa SATU demi SATU.
Jadi, jika Anda ingin menampilkan animasi yang berbeda satu sama lain, kami memanfaatkan fungsionalitas 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");
});
Contoh di bawah ini pertama-tama memindahkan <div>elemen ke kanan, lalu memperbesar ukuran font teks:
Contoh 2
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
Latihan jQuery
Referensi Efek jQuery
Untuk gambaran lengkap semua efek jQuery, silakan kunjungi Referensi Efek jQuery kami .