kaedah bernyawa dalam jquery

jQuery ialah perpustakaan JavaScript popular yang menyediakan pembangun dengan banyak cara mudah untuk memanipulasi elemen DOM dan melaksanakan animasi. Antaranya, kaedah animate() ialah kaedah yang sangat biasa digunakan untuk menukar nilai atribut CSS sesuatu elemen secara beransur-ansur dalam tempoh masa tertentu untuk mencapai kesan animasi. Dalam artikel ini, kami akan melihat secara mendalam kaedah animate(), termasuk sintaks, parameter dan penggunaannya.

Sintaks

Sintaks asas kaedah animate() adalah seperti berikut:

$(selector).animate({properties}, speed, easing, callback)

Berikut ialah penjelasan bagi setiap parameter:

• selector: diperlukan , satu atau lebih elemen untuk dianimasikan.
• properties: Diperlukan, objek yang menentukan satu atau lebih sifat CSS dan nilainya.
• speed: Pilihan, menentukan kelajuan pelaksanaan animasi, yang boleh menjadi nilai "perlahan", "cepat" atau milisaat.
• easing: Pilihan, menentukan fungsi pelonggaran animasi, yang boleh menjadi "ayunan" atau "linear" atau nama fungsi tersuai.
• callback: Pilihan, fungsi untuk dilaksanakan apabila animasi selesai.

Selain sintaks asas di atas, kaedah animate() boleh menerima banyak parameter dan pilihan lain.

Parameter

Berikut ialah beberapa parameter biasa yang boleh digunakan dalam kaedah animate():

• step: digunakan untuk melaksanakan operasi lain semasa proses animasi Fungsi dipanggil sekali setiap bingkai. Fungsi ini mempunyai dua parameter, parameter pertama mewakili kemajuan bingkai semasa, dan parameter kedua mewakili nilai elemen semasa.
• queue: Nilai Boolean yang menunjukkan sama ada animasi harus bermula selepas animasi sebelumnya selesai. Lalai kepada benar.
• start: Fungsi yang melaksanakan beberapa operasi sebelum animasi bermula.
• progress: Fungsi yang dipanggil secara berkala semasa animasi Ia akan dipanggil sekali setiap bingkai. Fungsi ini mempunyai tiga parameter Parameter pertama mewakili kemajuan bingkai semasa, parameter kedua mewakili nilai elemen semasa, dan parameter ketiga mewakili masa semasa.
• done: Fungsi yang dilaksanakan selepas animasi selesai.
• fail: Fungsi yang dilaksanakan apabila animasi gagal.
• always: Fungsi yang dilaksanakan apabila animasi selesai atau gagal.

Selain parameter ini, kaedah animate() juga boleh menerima beberapa pilihan lain, seperti:

• duration: Menentukan tempoh animasi, yang boleh menjadi nilai milisaat Atau "cepat", "perlahan".
• easing: Tentukan nama fungsi pelonggaran animasi atau fungsi tersuai.
• complete: Tentukan fungsi panggil balik untuk dipanggil apabila animasi selesai.
• queue: Menentukan sama ada animasi boleh ditambah pada baris gilir.
• specialEasing: Tentukan fungsi pelonggaran untuk sifat CSS tertentu.

Penggunaan

Berikut ialah beberapa kes penggunaan praktikal kaedah animate():

1. Menukar lebar dan ketinggian elemen

$("div").animate({
  width: "200px",
  height: "200px"
}, 1000);

Coretan kod ini akan memilih semua <div> elemen dan menukar lebar dan tingginya kepada 200 piksel dalam 1000 milisaat.

2. Tukar ketelusan dan kedudukan elemen

$("#element").animate({
  opacity: 0.5,
  left: "+=50",
  top: "+=50"
}, 1000);

Coretan kod ini akan memilih elemen dengan id "elemen" dan kemudian menukar ketelusannya dalam 1000 milisaat Tukarnya kepada 0.5, gerakkannya 50 piksel ke kiri dan 50 piksel ke atas.

3. Animasi Rantaian

$(".first").animate({left: "100px"}, 1000)
           .animate({top: "50px"}, 1000)
           .animate({height: "200px"}, 1000);

Coretan kod ini akan memilih elemen dengan kelas "first" dan mengalihkannya 100 piksel pertama ke kiri dan kemudian 50 piksel ke atas piksel dan akhirnya berubah ketinggiannya hingga 200 piksel. Selain itu, animasi ini dilaksanakan selepas animasi sebelumnya selesai.

4. Gunakan fungsi panggil balik

$("button").click(function(){
  $("div").animate({
    width: "200px",
    height: "200px"
  }, 1000, function(){
    alert("动画完成！");
  });
});

Coretan kod ini akan memilih semua <div> elemen apabila pengguna mengklik butang, dan kemudian menggunakan 1000 milisaat untuk memadamkannya Lebar dan ketinggian kedua-duanya ditukar kepada 200 piksel. Apabila animasi selesai, kotak gesaan akan muncul.

Ringkasan

Dalam artikel ini, kami mempelajari tentang kaedah animate() dalam jQuery, iaitu kaedah yang sangat biasa digunakan untuk menukar bentuk elemen secara beransur-ansur dalam tempoh masa tertentu. Nilai sifat CSS untuk mencapai kesan animasi. Kami mempelajari tentang sintaks, parameter dan penggunaannya, dan melihat beberapa contoh praktikal. Mahir dalam kaedah animate(), kami boleh menambah kesan animasi yang jelas dan menarik pada tapak web kami.

Atas ialah kandungan terperinci kaedah bernyawa dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!