Panduan untuk kaedah animate jQuery ()

mata teras

Kaedah JQuery
• adalah alat serba boleh yang membolehkan pemaju membuat animasi tersuai dengan secara beransur -ansur mengubah sifat CSS unsur -unsur dalam tempoh yang ditentukan. animate() Kaedah
• hanya sesuai untuk sifat CSS berangka dan tidak sesuai untuk animasi yang sangat kompleks kerana masalah prestasi mungkin berlaku. animate()
Kaedah ini kebanyakannya datang dalam dua bentuk:
• dan animate(properties[, duration][, easing][, callback]), dan kebanyakan parameter adalah pilihan. Parameter ini mengawal aspek animasi, seperti tempoh, fungsi pelonggaran, dan apa yang berlaku selepas animasi selesai. animate(properties[, options])
pemaju boleh membuat animasi yang lebih kompleks dengan menghubungkan pelbagai kaedah
• bersama -sama, yang membolehkan urutan animasi dilaksanakan dalam urutan panggilan. Ciri ini dipanggil "beratur", yang meningkatkan fungsi dan fleksibiliti animasi jQuery. animate()

JQuery adalah perpustakaan yang sangat baik yang telah mengubah cara beribu -ribu pemaju mengendalikan projek selama bertahun -tahun. Apabila membuat jQuery, CSS tidak dapat membuat animasi kompleks dan hanya boleh menggunakan JavaScript. JQuery adalah sangat membantu dalam animasi kerana beberapa kaedah dicipta untuk tujuan ini. Walaupun ia dilengkapi dengan beberapa animasi mudah (

, fadeIn(), hide(), dan lain -lain), untuk memastikan ia ringan, perpustakaan menyediakan cara yang sangat fleksibel untuk membuat apa sahaja yang kita mahukan animasi. Ini adalah subjek artikel ini. JQuery's slideDown() adalah kaedah pembungkus animate() animate(), yang bermaksud ia beroperasi pada satu set elemen DOM yang dipilih sebelum ini yang dibungkus oleh jQuery. Kaedah ini membolehkan anda menggunakan kesan animasi tersuai anda sendiri kepada elemen dalam koleksi anda. Untuk melakukan ini, kita mesti menyediakan satu set sifat gaya CSS dan nilai -nilai yang akan dicapai pada akhir animasi. Nilai perantaraan gaya semasa kesan animasi (yang diproses secara automatik oleh enjin animasi) ditentukan oleh tempoh kesan dan fungsi pelonggaran, yang akan dibincangkan tidak lama lagi. Senarai atribut gaya CSS yang boleh animasi adalah terhad kepada sifat-sifat yang menerima nilai angka. Nilai ini boleh menjadi nilai mutlak (contohnya, 200) atau nilai relatif dari titik permulaan. Untuk nilai mutlak, jQuery menganggap bahawa piksel adalah unit lalai. Kami juga boleh menentukan unit lain seperti EM, REM, atau peratusan. Untuk menentukan nilai relatif, kita mesti preface atau untuk menunjukkan nilai sasaran relatif dalam arah positif atau negatif. Sekarang kita mempunyai pemahaman tentang =, sudah tiba masanya untuk melihat tandatangannya dan parameternya. -= animate()

Tandatangan dan parameter

Kaedah ini mempunyai dua bentuk utama, kebanyakan parameternya adalah pilihan (ditunjukkan dalam kurungan persegi biasa):

• animate(properties[, duration][, easing][, callback])
• animate(properties[, options])
Mengenai parameter, ada banyak yang boleh dikatakan:

(objek): Jadual hash yang mengandungi nilai yang harus dicapai pada akhir animasi.
• properties
(nombor | String): Tempoh kesan (dalam milisaat) atau salah satu rentetan yang telah ditetapkan: "lambat" (600 milisaat), "normal" (400 milisaat), atau "cepat" (200 ms). Lalai adalah "normal".
• duration
(String): Nama fungsi pelonggaran yang akan digunakan semasa melakukan penukaran. Nilai lalai ialah "Swing".
• easing
(fungsi): Fungsi yang dilaksanakan apabila menghidupkan untuk setiap elemen animasi.
• callback
(objek): Jadual hash yang mengandungi satu set pilihan untuk lulus ke kaedah. Pilihan yang ada adalah seperti berikut:
• options
  (fungsi): Fungsi yang dipanggil apabila animasi selesai atau dihentikan tetapi tidak selesai.
  • always
  (fungsi): Fungsi yang dilaksanakan selepas animasi selesai.
  • complete
  (fungsi): Fungsi yang dipanggil selepas animasi selesai.
  • done (String | Nombor): Sama seperti yang diterangkan di atas.
  • duration (String): Sama seperti yang diterangkan di atas.
  • easing (fungsi): Fungsi yang dilaksanakan apabila animasi gagal.
  • fail (fungsi): Fungsi yang dijalankan selepas setiap langkah animasi. Fungsi ini dipanggil hanya sekali setiap elemen animasi.
  • progress (Bolean): Jika animasi mesti diletakkan dalam barisan kesan (lebih lanjut mengenai ini kemudian). Nilai lalai adalah benar.
  • queue (objek): Jadual hash satu atau lebih sifat CSS yang nilainya adalah fungsi pelonggaran.
  • specialEasing (fungsi): Fungsi yang dilaksanakan pada permulaan animasi.
  • start
  • step
  Istilah
  mudah
digunakan untuk menggambarkan cara di mana kelajuan bingkai diproses dan bernyawa. Apabila pilihan

ditetapkan kepada benar, kami membenarkan animasi dijalankan secara berurutan, dan apabila ditetapkan kepada palsu, animasi dibenarkan untuk dijalankan selari. Ini memberi kita banyak kuasa yang boleh kita gunakan seperti yang kita suka. Di seluruh artikel ini, kami akan menunjukkan beberapa aplikasi praktikal parameter ini untuk membolehkan anda mengalami kemungkinan

. queue Penggunaan contoh animate()

Dalam bahagian ini, kami akan membina beberapa demonstrasi untuk membuat kuasa . Ingat bahawa pendekatan ini tidak sesuai untuk animasi yang sangat kompleks kerana isu -isu yang berkaitan dengan prestasi dan kelancaran animasi.

jalankan animasi tunggal

animate() menjalankan animasi tunggal sangat mudah, hanya panggil kaedah sekali. Sebagai contoh, kita mungkin mahu memindahkan elemen dari satu sisi kotak ke yang lain. Untuk menggambarkan animasi ini, kami akan menetapkan dua elemen div, satu di dalam yang lain. Kami akan gaya mereka supaya bahagian dalam mempunyai latar belakang merah. Kod untuk melakukan ini adalah seperti berikut. Html:

<div class="rectangle">
  <div class="square-small"></div>
</div>

CSS:

.rectangle {
  width: 300px;
  height: 20px;
  display: block;
  position: relative;
  border: 1px solid black;
  margin: 20px 0;
}

.square-small {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: red;
}

Menggunakan kuasa animate(), kami memindahkan dataran kecil dari satu sisi ke yang lain:

$('.rectangle')
  .find('.square-small')
  .animate({
    left: 280
  }, 'slow');

Dalam kod ini, kami menyatakan bahawa atribut left adalah satu -satunya atribut untuk animasi. Kami menetapkan tempoh animasi ke nilai pratetap perlahan (600 milisaat). Kami menggunakan nilai mutlak untuk memindahkan dalaman <div> (dengan kelas <code>.square-small). Nilai ini berdasarkan lebar kontena yang kami tetapkan dengan kod CSS yang disenaraikan sebelum ini. Penyelesaian ini tidak begitu fleksibel kerana jika kita menukar lebar bekas, dalaman <div> tidak akan sampai ke sisi lain (jika kita menetapkan lebar yang lebih luas pada bekas), atau akan melebihi (jika kita menetapkan lebar sempit ). Satu penyelesaian adalah untuk menetapkan nilai atribut <code><div> berdasarkan pengiraan lebar semasa luaran dan dalaman <code>left seperti yang ditunjukkan di bawah:

left: $('.rectangle').width() - $('.rectangle').find('.square-small').width()

Jalankan pelbagai animasi dalam gelung

Melaksanakan pelbagai animasi pada satu elemen atau kumpulan elemen semudah menghubungkan panggilan ke animate(). Dalam contoh ini, kita akan menggerakkan persegi kecil kerana ia bergerak di sepanjang perimeter dari jam tangan dalaman dataran besar (bukan segi empat tepat). Untuk membina demo ini, kami akan menggunakan tag berikut:

<div class="square-big">
  <div class="square-small"></div>
</div>

Untuk gaya, kita perlu menggunakan CSS yang sama yang kita gunakan untuk .square-small serta gaya berikut untuk menetapkan gaya persegi paling luar:

.square-big {
  width: 300px;
  height: 300px;
  display: block;
  position: relative;
  border: 1px solid black;
  margin: 20px 0;
}

Langkah terakhir ialah menulis kod JavaScript untuk menarik empat baris yang membentuk perimeter jam yang ideal. Bermula dari sudut kiri atas dataran paling luar, kita perlu menghidupkan persegi kecil sehingga ia mencapai sudut kanan bawah dataran besar. Kuadrat kecil mesti bergerak secara menyerong untuk menghasilkan kesan. Sebaik sahaja ia mencapai sudut kanan bawah, kita perlu memindahkannya ke sudut kiri bawah. Ia kemudiannya harus sampai ke sudut kanan atas dan akhirnya kembali ke kedudukan asalnya. Dalam memperkenalkan demo ini, kami berkata kami mahu melakukan animasi tak terhingga. Oleh itu, kita perlu mencari jalan untuk menjalankan keseluruhan animasi sekali lagi, apabila langkah terakhir selesai. Untuk melakukan ini, kita boleh membungkus panggilan ke empat panggilan yang dipautkan dalam satu fungsi, jadi kita mempunyai fungsi untuk rujukan. Kami kemudian boleh menggunakan panggilan balik animate() dan Iife untuk menjalankan animasi sekali lagi apabila langkah terakhir selesai. Hasil menukarkan penerangan ini ke dalam kod adalah seperti berikut: complete

(function animation() {
  var options = {
    duration: 800,
    easing: 'linear'
  };

  $('.square-big')
    .find('.square-small')
    .animate({
      left: 280,
      top: 280
    }, options)
    .animate({
      left: 0
    }, options)
    .animate({
      left: 280,
      top: 0
    }, options)
    .animate({
      left: 0
    }, $.extend(true, {}, options, {
      complete: function() {
        animation();
      }
    }));
})();

Dalam kod di atas, sila ambil perhatian bagaimana kita menggunakan pembolehubah

supaya kita tidak perlu menulis parameter yang sama berulang kali apabila memanggil options. Juga, kerana kami terpaksa menambah animate() panggil balik kali terakhir kami menggunakan options, kami menggunakan kaedah complete jQuery. extend()

lebih banyak operasi panggil balik

Sebagai contoh terakhir kami, kami akan menetapkan sifat options, start dan complete parameter progress (parameter kedua borang kedua). Tujuannya adalah untuk melumpuhkan butang yang menjalankan animasi apabila diklik semasa animasi sedang berjalan. Selepas itu, kami ingin menunjukkan peratusan penyelesaian animasi. Untuk contoh ini, kami akan mengubah suai demo pertama yang kami bina. Menurut keterangan, kita perlu menambah butang dan elemen (kita akan menggunakan rentang) untuk memaparkan peratusan. Perubahan ini menghasilkan tag berikut:

<div class="rectangle">
  <div class="square-small"></div>
</div>

kita tidak perlu menambah lebih banyak gaya, jadi kita boleh melompat ke perbincangan kod JavaScript. Untuk menjalankan animasi hanya apabila butang diklik, kami perlu menambah pengendali ke acara klik butang. Di dalam pengendali, kami menggunakan kaedah JQuery's prop() untuk melumpuhkan dan membolehkan butang berdasarkan sama ada animasi sedang berjalan atau siap. Akhirnya, kami menggunakan parameter kedua yang diluluskan kepada pengendali yang dilampirkan pada pilihan progress untuk memaparkan peratusan penyempurnaan animasi. Kod yang dihasilkan kelihatan seperti ini:

.rectangle {
  width: 300px;
  height: 20px;
  display: block;
  position: relative;
  border: 1px solid black;
  margin: 20px 0;
}

.square-small {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: red;
}

Kesimpulan

Artikel ini membincangkan apa yang boleh anda lakukan dengan kaedah animate() jQuery. Kami memperkenalkan tandatangannya dan parameter yang diterima. Dalam artikel ini, kami meneroka tiga animasi contoh. Artikel ini hanya secara ringkas memperkenalkan kemungkinan animate(). Malah, dengan sedikit kesabaran dan kreativiti, kita boleh mencipta animasi yang benar -benar kompleks dan indah.

Soalan Lazim (FAQ)

Apakah kaedah Animate JQuery dan bagaimana ia berfungsi?

Kaedah JQuery Animate adalah alat yang berkuasa yang membolehkan anda membuat animasi tersuai. Ia berfungsi secara beransur -ansur mengubah sifat CSS elemen, dengan tempoh yang ditentukan oleh anda. Anda boleh menghidupkan sebarang atribut CSS, tetapi anda mesti menentukan atribut menggunakan kes unta, seperti

bukan marginLeft. Kaedah Animate juga membolehkan anda menentukan fungsi pelonggaran yang mengawal kelajuan animasi, serta fungsi panggil balik yang dilaksanakan selepas animasi selesai. margin-left

Bagaimana hendak berhenti atau menjeda animasi jQuery?

JQuery menyediakan kaedah

untuk menghentikan animasi. Kaedah ini menghentikan animasi yang sedang berjalan pada elemen yang dipilih. Sekiranya anda ingin menjeda animasi, ia akan menjadi lebih rumit, kerana jQuery tidak menyediakan kaedah terbina dalam untuk ini. Walau bagaimanapun, anda boleh melakukannya dengan menggunakan plugin atau mengawal kemajuan animasi secara manual. stop()

Bolehkah saya menggunakan animasi animasi jQuery untuk mengendalikan pelbagai sifat sekaligus?

Ya, anda boleh menggunakan kaedah Animate JQuery untuk menghidupkan pelbagai sifat CSS sekaligus. Anda hanya perlu menyertakan semua sifat untuk dihidupkan dalam objek

. Sebagai contoh, anda boleh menghidupkan lebar dan ketinggian elemen pada masa yang sama. properties

bagaimana saya menggunakan fungsi langkah dalam JQuery Animate?

Fungsi langkah dalam JQuery Animate adalah fungsi panggil balik yang dilaksanakan dalam setiap langkah animasi. Fungsi ini melewati dua parameter: now, yang merupakan nilai semasa harta animasi; Anda boleh menggunakan fungsi langkah untuk membuat animasi kompleks atau animasi debug. fx

Bolehkah saya menggunakan JQuery Animate untuk sifat CSS bukan angka?

Tidak, kaedah animasi jQuery hanya boleh digunakan untuk sifat CSS angka. Jika anda cuba menghidupkan sifat bukan angka seperti warna atau warna latar belakang, ia tidak akan berfungsi. Walau bagaimanapun, anda boleh menghidupkan sifat -sifat ini menggunakan plugin seperti jQuery UI atau warna jQuery.

Bagaimana menggunakan JQuery Animate untuk menghubungkan animasi?

anda boleh menghubungkan animasi jQuery dengan hanya memanggil pelbagai kaedah animasi satu demi satu. JQuery akan melaksanakan animasi mengikut urutan panggilan. Ini dipanggil "beratur", dan ia adalah ciri yang kuat dari animasi jQuery.

Bolehkah saya menggunakan JQuery Animate untuk membuat kesan gelongsor?

Ya, anda boleh membuat kesan gelongsor menggunakan kaedah animate jQuery. Anda boleh melakukan ini dengan menghidupkan ketinggian atau lebar elemen. Walau bagaimanapun, jQuery juga menyediakan

, slideDown dan slideUp kaedah, yang lebih mudah digunakan jika anda hanya ingin membuat kesan gelongsor mudah. slideToggle

bagaimana membuat animasi jQuery saya lebih lancar?

Terdapat pelbagai cara untuk membuat animasi jQuery anda lebih lancar. Salah satu cara ialah menggunakan fungsi pelonggaran yang mengawal kelajuan animasi. Pendekatan lain ialah menggunakan kaedah

, yang membolehkan penyemak imbas mengoptimumkan animasi. Anda juga boleh meningkatkan prestasi dengan meminimumkan bilangan operasi DOM dan menggunakan penukaran CSS jika mungkin. requestAnimationFrame

Bolehkah saya menggunakan JQuery Animate pada satu set elemen?

Ya, anda boleh menggunakan kaedah Animate JQuery pada satu set elemen. Apabila anda memanggil kaedah Animate pada objek jQuery dengan pelbagai elemen, animasi digunakan untuk semua elemen dalam koleksi.

Bagaimana untuk membuat kesan pudar menggunakan JQuery Animate?

anda boleh membuat kesan pudar menggunakan kaedah animate jQuery dengan menghidupkan atribut

. Walau bagaimanapun, jQuery juga menyediakan opacity, fadeIn, dan fadeOut kaedah, yang lebih mudah digunakan jika anda hanya ingin membuat kesan pudar yang mudah. fadeToggle