jquery menghentikan animasi css

Kesan animasi ialah elemen yang sangat biasa dalam penghasilan halaman web, dan animasi CSS ialah salah satu kaedah yang lebih popular. Walau bagaimanapun, dalam beberapa kes, adalah perlu untuk menghentikan animasi CSS yang sedang berjalan Dalam kes ini, jquery perlu digunakan untuk mencapainya. Artikel ini akan memperkenalkan cara menggunakan jquery untuk menghentikan animasi css.

1. Apakah animasi CSS

Kesan animasi dalam CSS3 ditakrifkan dengan menggunakan peraturan @keyframes. Pelbagai kesan animasi boleh dicapai dengan menambahkan atribut seperti bingkai utama dan masa animasi pada elemen.

Sebagai contoh, kita boleh mentakrifkan kod CSS berikut untuk melaksanakan animasi bergerak dari kiri ke kanan:

@keyframes move-right {
  0% { left: 0; }
  100% { left: 100px; }
}

#box {
  position: absolute;
  left: 0;
  animation: move-right 2s ease-out forwards;
}

Dalam kod di atas, kami mentakrifkan fail bernama animasi "move-right", yang menetapkan sifat kedudukan kiri elemen daripada 0% hingga 100% bingkai utama. Kemudian kami menggunakan animasi ini pada elemen dengan id "kotak", dan menetapkan masa animasi kepada 2 saat, kesan pelonggaran kepada "ease-out", dan akhirnya mengekalkan keadaan akhir animasi pada elemen.

2. Hentikan animasi CSS

Biasanya, animasi CSS akan gelung sehingga tamat mengikut masa dan peraturan animasi yang kami tetapkan. Tetapi kadangkala kita perlu menghentikan animasi semasa ia berjalan Dalam kes ini, kita perlu menggunakan jquery untuk mencapainya.

Pertama, kita perlu menambah butang atau pencetus lain pada elemen yang boleh menghentikan animasi dan menambah pendengar acara pada pencetus. Sebagai contoh, dalam kod di bawah, kami mencipta elemen div yang mengandungi butang dan menambah pendengar acara "klik" untuk butang:

<div id="box" class="animated">
  <button id="stop-btn">停止动画</button>
</div>

Seterusnya, kita perlu mentakrifkan pendengar acara jquery, dalam Hentikan animasi apabila pengguna mengklik butang. Hantar ID elemen animasi kepada pendengar acara, dan kemudian gunakan kaedah "stop()" jquery untuk menghentikan animasi. Contohnya, dalam kod di bawah, kami mencipta butang bernama "stop-btn" dan menambah pendengar acara klik padanya:

$(document).ready(function() {
  $('#stop-btn').click(function() {
    $('#box').stop();
  });
});

Dalam kod di atas, kami menggunakan kaedah "sedia ()" jquery untuk memastikan bahawa halaman telah dimuatkan, dan kemudian menambah pendengar acara klik untuk elemen butang. Apabila pengguna mengklik butang, jquery menghentikan animasi yang sedang berjalan pada elemen bernama "kotak". Perlu diingatkan bahawa jika kita ingin memainkan semula animasi, kita perlu menggunakan kaedah "animate()" jquery untuk memulakan semula animasi.

3. Perkara yang perlu diambil perhatian apabila menggunakan jquery untuk menghentikan animasi CSS

Apabila menggunakan jquery untuk menghentikan animasi CSS, anda perlu memberi perhatian kepada perkara berikut:

1. Kami boleh menggunakannya pada bila-bila masa jquery untuk menghentikan animasi CSS yang dimainkan, sama ada semasa animasi atau selepas animasi tamat.

2. Kita boleh menggunakan kaedah "stop()" untuk menghentikan semua animasi pada elemen yang ditentukan, atau menggunakan kaedah "stop(true)" untuk menghentikan animasi yang sedang dimainkan dan terus ke keadaan akhir , atau gunakan Kaedah "stop(false)" menghentikan animasi yang sedang dimainkan dan membiarkannya dalam keadaan semasa.

3 Apabila kami menghentikan animasi CSS, semua sifat animasi CSS yang ditentukan dan bingkai utama akan dialih keluar serta-merta. Ini bermakna jika kita ingin memainkan semula animasi, kita perlu menambah semula sifat CSS dan bingkai utama.

4. Ringkasan

Menggunakan jquery untuk menghentikan animasi CSS ialah cara yang sangat mudah untuk menghentikan animasi yang sedang dimainkan dan memulakannya semula apabila diperlukan. Walau bagaimanapun, dalam penggunaan sebenar, anda perlu memberi perhatian kepada pelbagai butiran Sebagai contoh, apabila mentakrifkan animasi, anda perlu menjelaskan butiran main semula dan berhenti, dan anda juga perlu mengetahui pelbagai status dan atribut main balik animasi. Artikel ini terutamanya memperkenalkan cara menggunakan jquery untuk menghentikan permainan animasi CSS. Saya harap ia akan membantu semua orang.

Atas ialah kandungan terperinci jquery menghentikan animasi css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!