Heim > Web-Frontend > CSS-Tutorial > Wie kann ich mit jQuery browserübergreifende CSS-Rotationsanimationen erzielen?

Wie kann ich mit jQuery browserübergreifende CSS-Rotationsanimationen erzielen?

Barbara Streisand
Freigeben: 2024-12-04 03:05:11
Original
601 Leute haben es durchsucht

How Can I Achieve Cross-Browser CSS Rotation Animations with jQuery?

Browserübergreifende CSS-Rotation mit jQuery.animate()

Problem:

Leistung CSS-Rotationsanimationen mit jQuery.animate() funktionieren nicht browserübergreifend. Die Rotation funktioniert bei Verwendung von .css(), jedoch nicht bei Verwendung von .animate().

Ursache:

CSS-Transformationen können nicht direkt mit jQuery animiert werden.

Lösung:

Zum Durchführen von CSS-Transformationsanimationen mit jQuery können Sie die folgende alternative Methode verwenden:

function AnimateRotate(angle) {
    var $elem = $('#MyDiv2');
    $({deg: 0}).animate({deg: angle}, {
        duration: 2000,
        step: function(now) {
            $elem.css({
                transform: 'rotate(' + now + 'deg)'
            });
        }
    });
}
Nach dem Login kopieren

Erklärung:

Diese Methode verwendet eine benutzerdefinierte „Schritt“-Rückruffunktion, um die „Transform“-Eigenschaft zu aktualisieren des ausgewählten Elements bei jedem Schritt der Animation. Die „Step“-Funktion erhält (jetzt) ​​die aktuelle Animationsposition als Parameter, mit der Sie den gewünschten Drehwinkel berechnen können.

Plugin:

Das können Sie Binden Sie diese Methode zur Vereinfachung in ein jQuery-Plugin ein verwenden:

$.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
        });
    });
};
Nach dem Login kopieren

Verwendung:

Um das Plugin zu nutzen, können Sie einfach aufrufen:

$('#MyDiv2').animateRotate(90);
Nach dem Login kopieren

Updates:

Die bereitgestellte Lösung wurde mehrmals aktualisiert, um die Effizienz zu verbessern und mehr zu bieten Flexibilität.

  • Update 2: Optimiert, um die Reihenfolge der Argumente unbedeutend zu machen.
  • Update 2.1: Ein Kontextproblem mit dem wurde behoben Kompletter Rückruf.
  • Update 2.2: Start hinzugefügt Parameter zum Umschalten von Animationen.

Zusätzliche Verwendungsdetails:

  • Die animateRotate-Funktion akzeptiert mehrere optionale Parameter, einschließlich Dauer, Beschleunigung und Vollständigkeit, mit Standardwerte werden bereitgestellt.
  • Der Benutzer kann diese Parameter auf verschiedene Arten bereitstellen, entweder als Positionsargumente oder als Objekt.
  • Die „Schritt“-Funktion bietet zusätzliche Kontrolle über die Drehung bei jedem Animationsschritt.

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery browserübergreifende CSS-Rotationsanimationen erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage