Bagaimana untuk menulis animasi dalam jquery

jQuery ialah perpustakaan JavaScript yang berkuasa yang sangat memudahkan kerja pembangun dan pereka bentuk. Antaranya, kesan animasi Jquery telah menjadi salah satu elemen terpenting dalam reka bentuk. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mencipta kesan animasi.

1. Kesan animasi jQuery

Kesan animasi jQuery biasanya dilaksanakan menggunakan fungsi animate(). Ia membolehkan pengaturcara mencipta animasi peralihan pada satu atau lebih sifat CSS. Fungsi animate() memerlukan sekurang-kurangnya dua parameter: sifat CSS untuk ditukar dan masa perubahan, dengan parameter ketiga pilihan menentukan fungsi yang akan dilaksanakan selepas selesai.

Contoh berikut akan menunjukkan cara menukar sifat CSS elemen untuk mencipta kesan animasi:

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left: '250px', opacity: '0.5'}, 2000);
  });
});

Dalam contoh di atas, apabila butang diklik, elemen div akan bergerak pada kelajuan 2000 milisaat Gerakkannya 250 piksel ke kiri dan tukar Opacity kepada 0.5.

2. Fungsi animate() jQuery

fungsi animate() jQuery boleh memasukkan berbilang parameter, termasuk sifat CSS, mengubah tempoh dan fungsi.

Contoh berikut akan menunjukkan cara menggunakan fungsi animate() untuk menukar berbilang sifat CSS pada masa yang sama:

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

Dalam contoh di atas, kami menukar kedudukan, ketelusan, ketinggian dan lebar elemen pada masa yang sama . Perubahan ini akan diselesaikan dalam tempoh 2000 ms.

3. Parameter kelajuan jQuery

jQuery menyediakan tiga parameter kelajuan lalai: perlahan, biasa dan pantas. Kita juga boleh menggunakan nombor untuk menentukan nilai kelajuan. Lebih tinggi nombor, lebih cepat animasi akan dilaksanakan. Contoh berikut menunjukkan cara menggunakan parameter kelajuan:

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

Contoh di atas menghidupkan elemen pada kelajuan perlahan, biasa dan pantas.

4. Fungsi panggil balik jQuery

Apabila memanggil fungsi animate(), kita boleh memberikannya fungsi panggil balik. Fungsi panggil balik akan dipanggil serta-merta selepas fungsi animate() menyelesaikan pelaksanaan.

Contoh berikut menunjukkan cara menggunakan fungsi panggil balik:

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left: '250px',
      opacity: '0.5'
    }, 2000, function() {
      alert("动画执行完毕!");
    });
  });
});

Contoh di atas memanggil fungsi alert() selepas fungsi animate() dilaksanakan.

5. Baris gilir jQuery

jQuery menggunakan baris gilir untuk menyimpan semua fungsi yang akan dilaksanakan. Apabila kita menggunakan fungsi animate(), fungsi itu sebenarnya menambah fungsi pada baris gilir. Baris gilir beroperasi atas dasar masuk dahulu keluar. Jadi jika kita ingin melaksanakan beberapa tugas lain selepas animasi selesai, kita perlu menggunakan baris gilir.

Contoh berikut menunjukkan cara menggunakan baris gilir untuk menentukan berbilang animasi:

$(document).ready(function(){
  $("button").click(function(){
    var div = $("div");
    div.animate({left: '250px'}, 2000);
    div.animate({top: '250px'}, 2000);
    div.animate({left: '0px'}, 2000);
    div.animate({top: '0px'}, 2000);
  });
});

Contoh di atas mengalihkan elemen ke penjuru kanan sebelah atas dan kemudian mengembalikannya ke kedudukan asalnya.

6. Mengosongkan baris gilir jQuery

Jika anda ingin mengosongkan baris gilir semasa animasi sedang berjalan, anda mesti menggunakan fungsi clearQueue(). Ia akan mengalih keluar sebarang fungsi berikutnya daripada animasi yang sedang berjalan.

Contoh berikut menunjukkan cara mengosongkan baris gilir:

$(document).ready(function(){
   $("button").click(function(){
     $("div").animate({left: '500px'}, 5000);
     $("div").animate({opacity: '0.0'}, 3000);
     $("div").animate({top: '200px'}, 5000);
     $("div").clearQueue();
   });
});

Contoh di atas akan mengosongkan baris gilir apabila pergerakan sampai ke tengah, iaitu animasi seterusnya tidak akan dilaksanakan.

7. Animasi berhenti jQuery

Jika anda ingin menghentikan animasi berjalan, anda boleh menggunakan fungsi stop(). Sebagai contoh, jika kita ingin menghentikan animasi di atas apabila butang berhenti ditekan, kita boleh menggunakannya seperti ini: Acara penyingkiran tetikus untuk memulakan dan menghentikan animasi:

$("button").click(function(){
  $("div").stop();
});

Contoh di atas akan menggerakkan elemen 250 piksel ke kanan pada alih tetikus, dan kembali ke kedudukan asal pada alih tetikus.

9. Ringkasan

fungsi animate() jQuery menjadikannya sangat mudah untuk mencipta kesan animasi. Sama ada animasi asas, pelbagai animasi atau fungsi panggil balik, anda boleh melaksanakannya dengan mudah Anda hanya perlu memahami operasi asas dan sintaks jQuery.

Apabila mereka bentuk animasi, kita perlu menilai kesan animasi yang hendak digunakan berdasarkan keperluan tapak web atau aplikasi. Kami boleh menambah parameter kelajuan yang sesuai pada permulaan animasi untuk memberikan pengalaman pengguna yang lancar kepada pengguna. Anda boleh menggunakan fungsi panggil balik dan baris gilir untuk melaksanakan sebarang operasi lain semasa pelaksanaan animasi. Pada bila-bila masa, anda boleh menggunakan fungsi stop() dan clearQueue() untuk menghentikan atau mengosongkan animasi dalam baris gilir.

Akhir sekali, fungsi animasi JQuery merupakan kemahiran penting untuk pereka bentuk, dan ia juga merupakan alat yang berkuasa untuk merealisasikan kesan animasi halaman web saya harap artikel ini dapat membantu semua orang memahami dan menggunakan kesan khas animasi dalam jQuery.

Atas ialah kandungan terperinci Bagaimana untuk menulis animasi dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!