Bagaimanakah Saya Boleh Mencapai Putaran CSS Serasi Cross-Pelayar dengan .animate() jQuery?

Putaran CSS: Keserasian Silang Penyemak Imbas dengan jQuery.animate()

Dalam percubaan untuk mencapai putaran serasi silang penyemak imbas (IE9 ) , anda mungkin menghadapi cabaran apabila menggunakan kedua-dua kaedah .css() dan .animate() jQuery. .css() mendayakan putaran, tetapi .animate() gagal berbuat demikian. Untuk menyelesaikan isu ini, pemalam .animateRotate() menyediakan penyelesaian yang elegan.

jQuery.animateRotate()

.animateRotate() menawarkan antara muka mesra pengguna untuk menganimasikan perubahan CSS. Berikut ialah hujah yang diterima:

• sudut: Menentukan sudut putaran dalam darjah.
• tempoh: Mentakrifkan tempoh animasi, lalai kepada 400 milisaat.
• pelonggaran: Menentukan fungsi pelonggaran animasi, secara lalai kepada "ayunan."
• lengkap: Fungsi panggil balik pilihan yang dilaksanakan apabila siap.

Penggunaan:

Terdapat dua cara utama untuk menggunakan .animateRotate(). Cara singkat melibatkan menghantar sudut secara langsung sebagai hujah:

$(node).animateRotate(90);

Atau, untuk lebih kawalan, anda boleh lulus objek dengan pilihan tambahan:

$(node).animateRotate(90, {
  duration: 1337,
  easing: 'linear',
  complete: function () {},
  step: function () {}
});

Fungsi Langkah :

Fungsi langkah membolehkan anda melakukan tindakan tambahan semasa setiap langkah animasi. Ia amat berguna untuk peralihan tersuai.

Di Sebalik Tabir:

.animateRotate() menggunakan teknik yang dikenali sebagai transformasi CSS dengan animasi. Daripada menghidupkan putaran secara langsung, ia menghidupkan nilai sudut, yang kemudiannya digunakan pada sifat transformasi. Penyelesaian ini membolehkan animasi dalam penyemak imbas yang tidak menyokong animasi transformasi CSS langsung.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai Putaran CSS Serasi Cross-Pelayar dengan .animate() jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!