Latest web development tutorials

Efek jQuery - Animasi

Metode jQuery animate () memungkinkan Anda untuk membuat animasi kustom.



jQuery

jQuery animasi - bernyawa () metode

Metode jQuery animate () digunakan untuk membuat animasi kustom.

sintaks:

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

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:

contoh

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

Coba »

lampu 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

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

Coba »

lampuAnda 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

$("button").click(function(){
$("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":

contoh

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

Coba »


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

$("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");
});

Coba »

Contoh berikut dari elemen <div> dipindahkan ke kanan 100 piksel, dan kemudian meningkatkan ukuran teks:

contoh 2

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

Coba »