Bagaimanakah jQuery.animate() Boleh Digunakan untuk Putaran CSS Merentas Pelayar?

Putaran CSS Merentas Pelayar dengan jQuery Animate()

Pengenalan

Putaran CSS memerlukan keserasian merentas pelayar untuk berfungsi dengan berkesan. Artikel ini bertujuan untuk menangani cabaran ini dengan meneroka isu dan menyediakan penyelesaian untuk mencapai penggiliran menggunakan jQuery.animate().

Isu Putaran jQuery

Coretan kod yang disediakan menunjukkan cara transformasi CSS tidak serasi dengan jQuery .bernyawa(). Walaupun css() berjaya memutar elemen, animate() gagal berbuat demikian.

Penyelesaian

Penyelesaian melibatkan penggunaan panggil balik langkah dalam animasi. Panggilan balik ini menyediakan akses kepada kedudukan animasi semasa, membolehkan kami menggunakan perubahan putaran secara manual dengan CSS. Berikut ialah kod yang diubah suai:

function AnimateRotate(angle) {
    // Get the jQuery object for better performance
    var $elem = $('#MyDiv2');
    // Use a pseudo object for animation, starting from `0` to `angle`
    $({ deg: 0 }).animate({ deg: angle }, {
        duration: 2000,
        step: function(now) {
            // Set the rotation using the CSS transform property
            $elem.css({
                transform: 'rotate(' + now + 'deg)'
            });
        }
    });
}

Pemalam jQuery untuk Kemudahan

Untuk memudahkan penggunaan, pemalam jQuery boleh dibuat:

$.fn.animateRotate = function(angle, duration, easing, complete) {
    return this.each(function() {
        var $elem = $(this);

        $({ deg: 0 }).animate({ deg: angle }, {
            duration: duration,
            easing: easing,
            step: function(now) {
                $elem.css({
                   transform: 'rotate(' + now + 'deg)'
                });
            },
            complete: complete || $.noop
        });
    });
};

Ciri Terperinci

Tempahan Dioptimumkan bagi Hujah:

Versi dikemas kini pemalam menyokong susunan yang dioptimumkan untuk hujah: sudut, tempoh, pelonggaran, lengkap.

Togol Fungsi:

Untuk senario yang memerlukan putaran togol ke depan dan ke belakang, parameter permulaan boleh ditambah pada fungsi, membolehkan lebih fleksibiliti.

Kesimpulan:

Penyelesaian yang disediakan secara berkesan menyelesaikan isu elemen berputar dengan jQuery.animate(). Dengan memanfaatkan panggilan balik langkah dan mencipta pemalam jQuery, pembangun boleh mencapai keserasian merentas penyemak imbas dengan mudah untuk putaran CSS.

Atas ialah kandungan terperinci Bagaimanakah jQuery.animate() Boleh Digunakan untuk Putaran CSS Merentas Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!