Comment jQuery.animate() peut-il être utilisé pour la rotation CSS entre navigateurs ?

Rotation CSS multi-navigateurs avec jQuery Animate()

Introduction

La rotation CSS nécessite une compatibilité entre navigateurs pour fonctionner efficacement. Cet article vise à relever ce défi en explorant les problèmes et en fournissant des solutions pour réaliser la rotation à l'aide de jQuery.animate().

Problème de rotation de jQuery

L'extrait de code fourni montre comment les transformations CSS sont incompatibles avec jQuery. .animer(). Alors que css() peut réussir à faire pivoter les éléments, animate() n'y parvient pas.

Solution

La solution consiste à utiliser le rappel d'étape dans l'animation. Ce rappel donne accès à la position actuelle de l'animation, nous permettant d'appliquer manuellement la transformation de rotation avec CSS. Voici le code modifié :

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)'
            });
        }
    });
}

Plugin jQuery pour plus de commodité

Pour simplifier l'utilisation, un plugin jQuery peut être créé :

$.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
        });
    });
};

Fonctionnalités avancées

Ordre optimisé des arguments :

Le La version mise à jour du plugin prend en charge un ordre optimisé pour les arguments : angle, durée, assouplissement, complet.

Fonctionnalité de bascule :

Pour les scénarios nécessitant de basculer la rotation d'avant en arrière, un démarrage Le paramètre peut être ajouté à la fonction, permettant plus flexibilité.

Conclusion :

Les solutions fournies résolvent efficacement le problème de la rotation des éléments avec jQuery.animate(). En tirant parti du rappel d'étape et en créant un plugin jQuery, les développeurs peuvent facilement obtenir une compatibilité entre navigateurs pour la rotation CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!